Crop image before sending as DataURL - javascript

I have a canvas that is edited by a user (some drag and drop stuff), and it has some instructions printed in text on it. I want to save the image without that text.
I am using KeneticJS. The size will always be the same and the text is at the bottom of the image, so I was thinking if I could just crop that out that would work fine. I am passing the image as a dataURL to my solution, is it possible to crop the image before sending it as a data url?
It would be great if I could just say dataURL.crop(height, width); or something.
Here is my code which, on button press, sends the image as a data url to my filemaker solution.
bGroup.on('click touchstart', function(){
stage.toDataURL({
callback: function(dataUrl) {
var myParam = encodeURIComponent(dataUrl.split(',').pop());
theURL = 'fmp://$/" & Get(FileName)& "?script=MoistureMap_Done&param=' + myParam;
window.location= theURL;
bDone.fill('green');
buttonLayer.draw();
}});
});

There's no direct way of clipping your text, but it's not difficult:
Create an image from the dataURL (or use the texted image if you still have access to it).
Create a new in-memory canvas: document.createElement('canvas');
Resize the canvas to your desired clipped size: canvas.width=10; canvas.height=10;
Draw the image from #1 onto the canvas: context.drawImage
The text at the bottom of the image will automatically be clipped since the in-memory canvas is smaller than the incoming image.
Pull the dataurl of the in-memory canvas: canvas.toDataURL

Related

how to save pixijs content as image

Let's say I have a pixijs app like this
https://codesandbox.io/s/o3qfi
I need to save the contents rendered by pixijs in the canvas as a screenshot.
I tried accessing the canvas like
app.renderer.view.toDataURL("image/png", 1.0)
and also through
document.getElementsByTagName('canvas')[0].toDataURL("image/png", 1.0)
However both of them returns an empty transparent image, instead of the canvas content rendered by pixijs
You'll need to extract it from the renderer.
For example, if you want to print the stage:
let blob = app.renderer.plugins.extract.image(app.stage).src;
window.location.href = blob.replace("image/png", "image/octet-stream");
Will download the following image:

How to save just the image of the canvas and not all canvas

I have a canvas 800x600 for example and I use fabricjs to add one image (200 x 200).
I apply several filters on my image and I would like to save it, but for the moment, I save the canvas 800x600 and I would like just save my picture after effects.
Is it possible?
From the latest version (download and compile it from GitHub), and this one is what you want:
canvas.toDataURL(left, top, width, height);
Check the question fabric.js - create Image object from ImageData object of canvas API for kangax’s comment only.
You can use FabricJS's canvas.toDataURL method which works much like html's canvas.toDataURL
var dataURL = myFabricCanvas.toDataURL();
If you wanted your user to save their canvas to their local disk, you could do this:
Create an image from the canvas.
Open that image in a new browser window
Have the user right-click and save-as the image
Here's code:
var win=window.open();
win.document.write("<img src='"+myFabricCanvas.toDataURL()+"'/>");
Note: if your image is hosted on a different domain than your .html, you will get a CORS security error and canvas.toDataURL will fail.
Try this
<button class="btn btn-success" id="rasterize">Convert Image To PNG</button>
//************************canvas to png image**********
document.getElementById('rasterize').onclick = function() {
if (!fabric.Canvas.supports('toDataURL')) {
alert('This browser doesn\'t provide means to serialize canvas to an image');
}
else {
window.open(canvas.toDataURL('png'));
var gh=(canvas.toDataURL('png'));+
alert(gh);
}
};
//--------------end canvas to png image-----------------------

Saving Canvas with the background image

I have a HTML5 canvas element with a background image. User is allowed to draw on the image and then need to save the complete canvas element with the background. I'm using below code for saving part but it only gets the canvas drawing but not the background image. what could i do to get the background image also?
var canvas = document.getElementById('your_canvas');
var context = canvas.getContext('2d');
// save canvas image as data url (png format by default)
var dataURL = canvas.toDataURL();
// set canvasImg image src to dataURL
// so it can be saved as an image
document.getElementById('canvasImg').src = dataURL;
Update:
My HTML
<div name='coords1' class='canvas-area input-xxlarge' disabled
placeholder='Shape Coordinates' id='imgDiv'
data-image-url='BackGround.jpg'></div>
I have the above div in my HTML page. then i dynamically create the canvas and draw on it. It's a bit lengthy code.
Don't use image on the div, draw the image on the canvas ..
use the following code to draw image on canvas,
var img=new Image();
img.src=/*image src*/;
var ctx=canvas.getContext("2d");
img.onload=function()
{
ctx.drawImage(img,x,y,width,height);
}
After image drawing completion at img.onload callback , allow user to draw on canvas...
Now save the canvas drawing....
To Get the Canvas with backgound Image
context.globalCompositeOperation="destination-over";
drawImage(yourBackgroundImage,0,0);

Is it possible to use getDataImage on a canvas that has undergone transformation in HTML?

I am trying to grab a particular part of the canvas and then put that image back onto the canvas in a very particular way. However, it seems that the get and put ImageData methods work on an absolute canvas that is not affected by image manipulations. Is there any way to use translations with the get and put dataImage operations in HTML5?
I have a line drawing that occurs at an angle and I want to capture that image, put it on its own canvas, do some processing on it, and then put it back on the canvas at that exact angle and position. I originally thought I could do this by repositioning the canvas based on the position and angle of the drawing, but this did not work because get and put dataImage use absolute rather than relative coordinates.
You could send the data to an image, and draw the image to the new canvas for processing. That way, you will get what appears on the canvas, exactly as it appears.
var img = new Image();
img.onload = function(){
processingCanvas.width = this.width;
processingCanvas.height = this.height;
processingCanvas.drawImage(this,0,0);
}
img.src = originalCanvas.toDataURL();
And boom, it's on your processing canvas (after you wait for it some). As long as you don't have an absolutely HUGE canvas, this method should work rather quickly. Just get everything you want, and make sure it is visible on the canvas. And then you know how to get the processed data back to the other canvas. I hope this was what you were looking for.

How Do You Render a Portion of an SVG in Canvas?

Core Problem:
The goal is to render a portion of an SVG to a fixed size Canvas element on a web page.
My Attempted Solution:
Seeing as CanVG seems to be the most straight-forward way to render an SVG image in Canvas I figured I could leverage the viewBox attribute to crop the image prior to CanVG's rendering. I've been having trouble on this point.
The Question:
Provided an SVG image, how can one render a portion of that image to a Canvas element?
Create an offscreen canvas and render to it using CanVG:
var full = document.createElement('canvas');
full.width=800; full.height=600;
canvg(full, '<svg>…</svg>');
Copy a portion of this canvas-as-image to a region on another canvas using drawImage (see link for parameter details):
var ctx = myVisibleCanvas.getContext('2d');
ctx.drawImage(full,10,20,80,60,92,16,80,60);
Edit: However, the above is not necessary if you have access to the SVG source (either directly in JS or via an XMLHTTP request) and can modify the viewBox attribute before rendering. See this demo which shows an SVG file rendered directly to one canvas, and then changes the viewBox attribute and renders the clipped region to another canvas.
Which exactly is the problem you get?
The context.drawImage function has a nice cropping feature built in. Instead of the standard 3 parameters (image object, x position, y position) you just pass to it 9 parameters and it will crop the image. These are the parameters:
context.drawImage(
imageObject,
original image x crop position,
original image y crop position,
original image crop width,
original image crop height,
canvas image x crop position,
canvas image y crop position,
canvas image crop width,
canvas image crop height
)
I have no idea if this works with CanVG but, as long as you can pass an image object to the function drawImage(), you will be able to crop it as mentioned in the code.

Categories