Prevent font download from Chrome Dev Tools - google-chrome

Is there a way to prevent people from just inspecting your website and downloading paid fonts via the Chrome Dev Tools window? Right now all I have to do is go to the Sources panel and Save link as / Open in a new tab, and I can download it.
Is there way to prevent this? Obfuscate or atleast make the process difficult?

1.
First, never create a physical link to the font itself. (Until a licence fee for that font has been paid for.)
2.
Use an image processor (i.e. ImageMagick) to create an image of the typeface sample(s)† and display that image as the sample on screen.
If you use these two steps above, there will not be an actual font file that they may download in an unwarranted manner.
3.
Allow only users those who have paid the licence access to the font zip file.
† Here is a working php sample of using ImageMagick to create an image of a typeface:
<?php
error_reporting(E_ALL);
ini_set( 'display_errors','1');
// Create a new imagick object
$im = new Imagick();
// Create new image. This will be used as fill pattern
$im->newPseudoImage(50, 50, "gradient:red-black");
// Create imagickdraw object
$draw = new ImagickDraw();
// Set font/typeface
$draw->setFont("path/TheTypeface.ttf");
// Set font size to 72
$draw->setFontSize(72);
// Annotate some text
$draw->annotation(20, 50, "Hello World! This is my font sample!");
// Create a new canvas object and a white image
$canvas = new Imagick();
$canvas->newImage(350, 70, "white");
// Draw the ImagickDraw on to the canvas
$canvas->drawImage($draw);
// Set the format to PNG
$canvas->setImageFormat('png');
// Output the image
header("Content-Type: image/png");
echo $canvas;
?>
You will have to dicker with these settings, to get what you want. ImageMagick must be installed first, of course.
Note:
I'm going to be travelling internationally over the next few days which precludes Web access for me (programmer's heaven, right?). If you have any questions, please comment them here, and I will answer them when I land.
All the best. Sounds like a fun project.

Related

Rendering with Chromium direct to my own 'canvas' (e.g. GDI+)

First, a quick description of the end-goal:
I'm building a cross-platform, .NET Core-based, printing app. This app will be able to print all sorts of file types with custom page settings, such as headers, footers, and margins. A key feature is it supports multiple-pages-up (e.g. a landscape sheet of paper with two portrait pages rendered side by side...called "2up").
Printing HTML is important not just because of printing HTML, but I want to use all the great HTML-based syntax-highlighting out there for source code (e.g. www.prismjs.com).
The app is basically done but for one major problem: I can't get the HTML to render well enough. So far I've implemented source code printing three ways:
1) As plain text with my own line-numbering and line-wrap engine. This works wonderfully for everything I can throw at it, but it does not support syntax highlighting.
2) Using Html-Renderer (https://github.com/ArthurHub/HTML-Renderer/issues) an OSS .NET-based Html Renderer. This implementation is the weakest because Html-Renderer's CSS support is really weak. It can't handle hardly anything prismjs or highlightjs' generate.
3) Usinglitehtml' (www.litehtml.com) via LiteHtmlSharp. This was very promising and I almost have it working with some major hacks, but litehtml also does not support key, modern, HTML/CSS features.
Neither Html-Renderer or litehtml support the CSS page-break-before feature that, when combined with media print would let me ensure lines are not split between pages.
What I really want to use is the Chromium rendering engine. litehtml provides a fantastic API for this sort of problem: It calls me whenever it needs to render, and I draw (text, table borders, images, etc...) using GDI+. My dream is to find something in Chromium (CEF, Puppeteer, ???) that provides a similar API.
Or, an alternative, an API that will let me pass in a GDI+ Graphics (or HDC) and the renderer will render to that surface.
With Html-Renderer I measure calculate # pages like this.
SizeF size = HtmlRender.MeasureGdiPlus(g, html, containingSheet.GetPageWidth());
int numPages = (int)(size.Height / containingSheet.GetPageHeight());
My page rendering code (e.g. OnPaint) looks like this:
SizeF size = new SizeF(containingSheet.GetPageWidth(), containingSheet.GetPageHeight());
HtmlRender.RenderGdiPlus(g, html, PointF(0, 0), size );
With htmllite the OnPaint code looks like this:
// Set the clip such that any extraLines are clipped off bottom
g.SetClip(new Rectangle(0, 0, (int)Math.Round(PageSize.Width), (int)Math.Round(PageSize.Height - remainingPartialLineHeight)));
LiteHtmlSize size = new LiteHtmlSize(Math.Round(PageSize.Width), Math.Ceiling(PageSize.Height));
litehtml.Document.Draw((int)-0, (int)-yPos, new position {
x = 0,
y = 0,
width = (int)size.Width,
height = (int)size.Height
});
And in this case the call to litehtml.Document.Draw causes a bunch of callbacks into my app that I process using the same Graphics the OnPaint is called with.
Most discussions of CEF and Chromium point to ScreenshotAsync etc... which will not do because I need to be rendering to a PRINTERS HDC (or GDI+) and blitting bitmaps will loose quality.
I have poured over the Chromium source and I cannot find the obvious way to say to CEF/Chromium "render page 1 (defined as Height/Width) to this GDI+ Graphics object" then "render page 2..." etc... The printing support (and how pdfium is integrated come close!).
Chromium issue 311308 indicates I'm hosed until this work gets picked up again.
Note: I have full access to nodejs w/in my app. I have built a dotnet/nodejs bridge, which is how I convert the raw text file of a source code file to richly formatted, line-numbered, syntax-highlighted html via prismjs. This means I could easily use puppeteer/Headless Chrome if I could just figure out the right APIs.
Does anyone have a suggestion that might help? I'm willing to contribute to Chromium if it's not major heart surgery.

Google Map V2 GIcon.shadow Image display in local development server but not from test server

I have custom marker icon (gif/png) to display on Google Map V2. I am using GICON and shadow property to set image path. The marker icons are diplaying as expected in development system. But after i deploy the system into server (Windows server 2008 r2, IIS 7.5), the icons are not displaying in some PC (not all). For some users the icons are displaying but for some users it is not displaying. I really appreciate all your help on this regard.
The code used is below :
var cm_baseIcon = new GIcon();
if (Records[i].Act == '1')
cm_baseIcon.shadow = "images/img/Markers/green.gif";
else
cm_baseIcon.shadow = "images/img/Markers/red.gif";
cm_baseIcon.iconSize = new GSize(27, 27);
cm_baseIcon.iconAnchor = new GPoint(9, 34);
cm_baseIcon.infoWindowAnchor = new GPoint(0, 0);
cm_baseIcon.infoShadowAnchor = new GPoint(13, 27);
var markerOpts = {};
var icon = new GIcon(cm_baseIcon);
markerOpts.icon = icon;
When I load your test page, I don't see any markers. Should the page create some markers when first loaded like this, or do I need to interact with the page in some way to get it to display any markers?
I set a breakpoint inside the initialize() function. Your Records variable is an empty array, i.e. []. So the for loop in this function that creates the markers never executes.
Do you know how to use the JavaScript debugger in a browser? It will let you figure out what is going wrong without having to ask anyone. I and other people here are happy to help, of course, but you'll make much faster progress if you can debug this on your own.
I recommend the developer tools in the Chrome browser. Here is a good introduction to the Chrome DevTools. Read through that and try out the JavaScript debugger in particular. You can stop your code and look at variables, change values, single step through the code to see what each line does, etc. This will at least double your productivity in JavaScript, and probably even more than that.

HTML5/Canvas - Save Base64 image to server (replacing current image)

I am currently experimenting with the HTML5 Canvas.
I currently made a simple little painting app where you can draw lines and what not.
I made it so I can save the image in base64. with
var dataUrl = document.getElementById('your-canvas').toDataURL();
I was wondering if it is possible to take that image, and save it to my server (or anywhere) replacing/overwriting an image that is already there.
The goal of this is to have the saved image as the background for the canvas. Then every time someone draws on the canvas and clicks save, it saves their drawing as the background image so the next person who goes on it can see what the last person drew.
Basically a public internet whiteboard.
Can someone tell me if this is possible, and point me in the right direction (code languages, tutorials, etc.)?
Thanks.
You can display or save image like this:
$imgData = $_POST['data'];
$imgData = str_replace(' ','+',$_POST['data']);
$imgData = preg_replace('/^data:image\/(png|jpg);base64,/','',$imgData);
header("Content-type: image/png");
echo base64_decode($imgData);

How do you change the background color of a live tile at runtime?

I'm trying to change the background color of a live tiles on my Windows 8 application at runtime. Is this possible? Does anybody have a code snippet?
Background color is specified in app manifest. Thus it does not seems to be possible.
The same can be emulated by sending custom time at runtime with appropriate background image (for a color). This is quirky way, but my little mind can think of this approach only.
Suppose you have already fixed the problem but I will post this info here, might be useful if someone come accross this thread.
For Primary Tile the answer from Bruno Lemos is correct.
For Seconday Tiles I would use TileUpdateManager.CreateTileUpdaterForSecondaryTile(Tile2_ID).
Using TileNotifications and TileUpdaterManager works instantly to me.
Using the Tile templates you will have to modify some XML code from the template, but you could also download NotificationsExtensions NuGet package and do it this way:
var tile2 = TileContentFactory.CreateTileSquare150x150PeekImageAndText01();
tile2.Branding = TileBranding.Name;
tile2.Image.Src = "ms-appx:///assets/Logo-transparent.png"; //Useful to have the same logo image with transparent background and other colors
tile2.TextHeading.Text = "Heading";
tile2.TextBody1.Text = "String1";
tile2.TextBody2.Text = "String2";
tile2.TextBody3.Text = "String3";
var doc = new XmlDocument();
doc.LoadXml(tile2.ToString());
var updater = TileUpdateManager.CreateTileUpdaterForSecondaryTile(tile2_id);
updater.EnableNotificationQueueForSquare150x150(true); //enables up to 5 different tile *animations* for 150 square icon, can be enabled for other sizes too
updater.Update(new TileNotification(doc) { Tag = "1" });
The code above takes into account the SecondaryTile has been created previously.
You can see the different templates for icons here: https://msdn.microsoft.com/en-us/library/windows/apps/xaml/windows.ui.notifications.tiletemplatetype.aspx
You only have to change the line TileContentFactory.CreateNAMEOFTEMPLATE and fill the different string/image fields.
Info about EnableNotificationQueue to have more than 1 animation in the tile can be found here: https://msdn.microsoft.com/en-us/library/windows/apps/hh781199.aspx
For Primary / Default Tile, you can do what #Tilak said: create tile images notifications and use TileUpdateManager.CreateTileUpdaterForApplication().Update to update it.
For Secondary Tiles, do the following:
In the app manifest, set the background color to "transparent"
In the app manifest, use images with transparent background
Now you can do that at runtime:
var tile = new SecondaryTile("YOUR_TILE_ID");
tile.VisualElements.BackgroundColor = Colors.Red;
await tile.UpdateAsync();
The problem is: The background is not updating immediately and I don't
know why. But you can see the effect after sign out / sign in, for
example. (tested using windows 10)
So this answer is incomplete, but hopefully can give insights to people coming here from google, like me.
#brunolemos

How to take snap shot /print screen of client area and save as image in database?

I have asked this question before but now with more elaborate way. I working on this for past two months and the result is zero.
All i need is .i am allowing the client to create a diagram by dropping the images on a div whose background is a esri Map . When they clik save ,the snapshot of the whole div has to be saved as image in database.
If some one could suggest activx plug-in for taking print screen ot capture the client screen .pls suggest
EDITED
I tried something like savefrom URL ,but i dont want to save the whole page ,only div.
HttpWebRequest myReq = (HttpWebRequest)WebRequest.Create(url);
WebResponse myResp = myReq.GetResponse();
and
WebClient myWebClient = new WebClient();
// Download home page data.
Console.WriteLine("Downloading " + remoteUri);
// Download the Web resource and save it into a data buffer.
byte[] myDataBuffer = myWebClient.DownloadData(remoteUri);
I would be more focused on extracting/scraping the div locations (that the user's dragged) and passing them off to the server so it can be processed. The processing would include creating a Bitmap, placing the ESRI Map as the background (with any applicable off-sets), then overlaying the "movable/dragged" DIVs [more specifically, the images that are associated to them] on top of that base, then exporting the whole entry as a "Screenshot".
You should be looking more at reproducing the outcome instead of capturing it (at least if this is planned for a web-client implementation).