I try to integrate a plugin
Demo here: http://makg10.github.io/jquery-meme-generator/
The js code and read.me here:
https://jsfiddle.net/t6xu4pyf/1/
(function($){
var i18n = {
topTextPlaceholder: "TEXTE HAUT",
bottomTextPlaceholder: "TEXT BAS",
Server side and client, it works for me if I put directly the url of an image in my html.
If I use
It also works except that the image does not resize to upload.
I'm very very bad with the canvas and I do not know at all if I can work on the size of the image directly in the plugin code or if I have to resize the image "before" with other function? ()
Thank you very much for your help
Finally, solution was client side.
It is about the image resize before upload ... no more.
The answer already existed in many topic above. Sorry.
Anyway, here's the code:
function readURL(input) {
if (input.files && input.files[0]) {
var current_file = input.files[0];
var reader = new FileReader();
reader.onload = function (event) {
var image = new Image();
image.src = event.target.result;
image.onload = function () {
var maxWidth = 500,
maxHeight = 500,
imageWidth = image.width,
imageHeight = image.height;
if (imageWidth > imageHeight) {
if (imageWidth > maxWidth) {
imageHeight *= maxWidth / imageWidth;
imageWidth = maxWidth;
}
}
else {
if (imageHeight > maxHeight) {
imageWidth *= maxHeight / imageHeight;
imageHeight = maxHeight;
}
}
var canvas = document.createElement('canvas');
canvas.width = imageWidth;
canvas.height = imageHeight;
image.width = imageWidth;
image.height = imageHeight;
var ctx = canvas.getContext("2d");
ctx.drawImage(this, 0, 0, imageWidth, imageHeight);
$('#example').attr('src', canvas.toDataURL(current_file.type));
}
}
reader.readAsDataURL(input.files[0]);
}
}
$("#inputfiles").change(function(){
readURL(this);
});
Hi nobody know how to get or maybe set the name of an image in a canvas?
i use this code to save a canvas as image, but i don't know how get the name of the image or how set .
My goal is to load a image or pdf, draw on it and save in another image or pdf.
var img = new Image();
var startimg="img/green.jpg";
$scope.image=startimg;
img.src = startimg;
var sourceCanvas = document.getElementById('signatureCanvas');
var context = sourceCanvas.getContext('2d');
var canvasFirma = document.getElementById('tempCanvas');
var contextFirma = canvasFirma.getContext('2d');
img.onload = function() {
sourceCanvas.width = img.width;
sourceCanvas.height = img.height;
//context.drawImage(img, 0, 0);
console.log('The canvas size is '+ sourceCanvas.width +'*'+ sourceCanvas.height);
console.log('The image size is '+ img.width +'*'+ img.height);
context.drawImage(img, 0, 0, img.width, img.height);
}
var signaturePad = new SignaturePad(canvasFirma);
$scope.clearCanvas = function() {
signaturePad.clear();
}
$scope.saveCanvas = function() {
$scope.clearSave = false;
$scope.FirmaBtn = true;
$scope.canvasSi = false;
//salvo la firma
var firma = signaturePad.toDataURL("image/jpeg");
$timeout( function(){
$scope.signature = firma;
if ($scope.signature) {
$scope.resizeCanvas();
}
}, 200);
};
//to merge canvas and image
var canvasF = document.getElementById("canvasFinale");
var ctx = canvasF.getContext("2d");
var img1 = loadImage('img/green.jpg', main);
/*this one "image.jpg" i need to get the name or give new one because this is for example*/
var img2 = loadImage('img/image.jpg', main);
var imagesLoaded = 0;
function main() {
imagesLoaded += 1;
if(imagesLoaded == 2) {
// composite now
ctx.drawImage(img1, 0, 0);
//questo da la transparenza magari toglierlo
ctx.globalAlpha = 0.5;
ctx.drawImage(img2, 0, 0);
}
}
function loadImage(src, onload) {
var img = new Image();
img.onload = onload;
img.src = src;
/*
canvasF.width = img.width;
canvasF.height = img.height;
ctx.drawImage(img, 0, 0, img.width, img.height);
*/
console.log("src "+ src);
return img;
}
$timeout( function(){
$scope.signature = firma;
if ($scope.signature) {
$scope.resizeCanvas();
}
}, 200);
};
$scope.resizeCanvas = function () {
canvasFirma.width = canvasFirma.offsetWidth * ratio;
canvasFirma.height = canvasFirma.offsetHeight * ratio;
canvasFirma.getContext('2d').scale(ratio, ratio);
console.log("resize canvasFirma 2");
};
You can download the canvas image with a custom name by making use of the download attribute.
Codepen Example
var canvas = $("#canvas")[0];
var ctx = canvas.getContext('2d');
ctx.fillRect(10,10,10,10);
$("#download").on("click", function(e) {
$("#download").attr("download", "CustomName.png");
$("#download").attr("href", canvas.toDataURL().replace(/^data:image\/[^;]/, 'data:application/octet-stream'));
});
This is the code i wrote to resize the image in aspect ratio, it works on chrome but not display on firefox, does anyone know what is wrong.
var image = new Image();
image.src = data;
//$(image).load(function () {
var aspectRatio = getAspectRatio(parseFloat($(image).prop('naturalWidth')),
parseFloat($(image).prop('naturalHeight')),
dstWidth,
dstHeight);
var canvas = document.createElement('canvas');
canvas.width = dstWidth;
canvas.height = dstHeight;
var x = (dstWidth - aspectRatio[0]) / 2;
var y = (dstHeight - aspectRatio[1]) / 2;
var ctx = canvas.getContext("2d");
ctx.drawImage(image, x, y, aspectRatio[0], aspectRatio[1]);
return canvas.toDataURL("image/png");
This is work it generated by the canvas.toDataURL
data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAQEAAADACAYAAAAEL9ZYAAAA1klEQVR4nO3BAQ0AAADCoPdPbQ8HFAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAADwYD7QAB/UrDfgAAAABJRU5ErkJggg==
To make it work you will need to handle the asynchronous nature of image loading. You will have to use a callback mechanism here. The reason it "works" in Chrome is accident; that is the image happen to be in the cache when you try and/or the browser is able to deliver the uncompressed/decoded image before you use the image in the drawImage call.
This will probably not work when it's online for most users so to properly handle loading you can do -
Example:
function getImageUri(url, callback) {
var image = new Image();
image.onload = function () { // handle onload
var image = this; // make sure we using valid image
var aspectRatio = getAspectRatio(parseFloat($(image).prop('naturalWidth')),
parseFloat($(image).prop('naturalHeight')),
dstWidth,
dstHeight);
var canvas = document.createElement('canvas');
canvas.width = dstWidth;
canvas.height = dstHeight;
var x = (dstWidth - aspectRatio[0]) / 2;
var y = (dstHeight - aspectRatio[1]) / 2;
var ctx = canvas.getContext("2d");
ctx.drawImage(image, x, y, aspectRatio[0], aspectRatio[1]);
// use callback to provide the finished data-uri
callback(canvas.toDataURL());
}
image.src = url; // set src last
}
Then use it this way:
getImageUri(myURL, function (uri) {
console.log(uri); // contains the image as data-uri
});
I am using the following code to grab an image from URL and convert it into Base64:
function convertImgToBase64(url, callback){
var canvas = document.createElement('CANVAS'),
ctx = canvas.getContext('2d'),
img = new Image;
img.crossOrigin = 'Anonymous';
img.onload = function(){
canvas.height = img.height;
canvas.width = img.width;
ctx.drawImage(img,0,0);
var dataURL = canvas.toDataURL();
callback.call(this, dataURL);
canvas = null;
};
img.src = url;
}
convertImgToBase64(INSER_URL_HERE, function(base64Img){
$("#data_url").text(base64Img);
imageRef.set(base64Img);
});
I am thoroughly confused. So far, the code works and img.onload is fired ONLY when I have tested it using images from Wikipedia (e.g. http://upload.wikimedia.org/wikipedia/commons/4/4a/Logo_2013_Google.png)! All other external image URLs I have tried do not fire img.onload (e.g. http://www.ipadenclosures.com/php-oak/themes/global/admin_images/Apple_gray_logo.png). Any ideas why these images are not loading?
I'd like to know if there is a way to dynamically modify/access the data contained in html images just as if they were an html5 canvas element. With canvas, you can in javascript access the raw pixel data with getImageData() and putImageData(), but I have thus far been not able to figure out how to do this with images.
// 1) Create a canvas, either on the page or simply in code
var canvas = document.createElement('canvas');
var ctx = canvas.getContext('2d');
// 2) Copy your image data into the canvas
var myImgElement = document.getElementById('foo');
ctx.drawImage( myImgElement, 0, 0 );
// 3) Read your image data
var w = myImgElement.width, h=myImgElement.height;
var imgdata = ctx.getImageData(0,0,w,h);
var rgba = imgdata.data;
// 4) Read or manipulate the rgba as you wish
for (var px=0,ct=w*h*4;px<ct;px+=4){
var r = rgba[px ];
var g = rgba[px+1];
var b = rgba[px+2];
var a = rgba[px+3];
}
// 5) Update the context with newly-modified data
ctx.putImageData(imgdata,0,0);
// 6) Draw the image data elsewhere, if you wish
someOtherContext.drawImage( ctx.canvas, 0, 0 );
Note that step 2 can also be brought in from an image loaded directly into script, not on the page:
// 2b) Load an image from which to get data
var img = new Image;
img.onload = function(){
ctx.drawImage( img, 0, 0 );
// ...and then steps 3 and on
};
img.src = "/images/foo.png"; // set this *after* onload
You could draw the image to a canvas element with drawImage(), and then get the pixel data from the canvas.
After having some issues with this code, I want to add one or two things to Phrogz's answer :
// 1) Create a canvas, either on the page or simply in code
var myImgElement = document.getElementById('foo');
var w = myImgElement.width, h=myImgElement.height; // New : you need to set the canvas size if you don't want bug with images that makes more than 300*150
var canvas = document.createElement('canvas');
canvas.height = h;
canvas.width = w;
var ctx = canvas.getContext('2d');
// 2) Copy your image data into the canvas
ctx.drawImage( myImgElement, 0, 0, w, h ); // Just in case...
// 3) Read your image data
var imgdata = ctx.getImageData(0,0,w,h);
var rgba = imgdata.data;
// And then continue as in the other code !
that worked for me (IE10x64,Chromex64 on win7, chromium arm linux, ...seems to bug with firefox 20 arm linux but not sure ... to re-test)
--html--
<canvas id="myCanvas" width="600" height="300"></canvas>
<canvas id="myCanvasOffscreen" width="1" height="1"></canvas>
-- js --
// width & height can be used to scale image !!!
function getImageAsImageData(url, width, height, callack) {
var canvas = document.getElementById('myCanvasOffscreen');
canvas.width = width;
canvas.height = height;
var context = canvas.getContext('2d');
var imageObj = new Image();
imageObj.onload = function() {
context.drawImage(imageObj, 0, 0, width, height);
imgData = context.getImageData(0,0,width, height);
canvas.width = 1;
canvas.height = 1;
callack( imgData );
};
imageObj.src = url;
}
-- then --
var canvas = document.getElementById('myCanvas');
var ctx = canvas.getContext('2d');
var imgData;
getImageAsImageData('central_closed.png', IMG_WIDTH, IMG_HEIGHT,
function(imgData) {
// do what you want with imgData.data (rgba array)
// ex. colorize( imgData, 25, 70, 0);
ctx.putImageData(imgData,0,0);
}
);
you first want to draw a pic on the canvas and then get the imageData from the canvas ,it is a wrong way,because the js think it is a "Cross-domain access",but the getIamgeData method don't allow the "Cross-domain access" to an image.you can hava a try by put the in the root place and access it by "localhost" .
Im not sure if it is possible, but you can try requesting pixel information from PHP, if GD library it will be an easy task, but surely will be slower. Since you didnt specified application so I will suggest checking SVG for this task if they can be vector images than you will be able to query or modify the image.
Directly work on IMG element is also valid:
var image = document.createElement('img'),w,h ;
image.src = "img/test.jpg" ;
$(image).one('load',function(){
w = image.naturalWidth ;
h = image.naturalHeight ;
var cnv = document.createElement('canvas') ;
$(cnv).attr("width",w) ;
$(cnv).attr("height",h) ;
var ctx = cnv.getContext('2d') ;
ctx.drawImage(image,0,0) ;
var imgdata = ctx.getImageData(0,0,w,h) ;
var rgba = imgdata.data ;
for (var px=0,ct=w*h*4;px<ct;px+=4){
var r = rgba[px+0] ;
var g = rgba[px+1] ;
var b = rgba[px+2] ;
var a = rgba[px+3] ;
// Do something
rgba[px+0] = r ;
rgba[px+1] = g ;
rgba[px+2] = b ;
rgba[px+3] = a ;
}
ctx.putImageData(imgdata,0,0) ;
$("body").append(cnv) ;
}) ;