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?
Related
My friend and I are trying to add images to a canvas using JavaScript; however we have no clue how to even do that and we've tried every possible string of code involving drawing images (such as ones from google, etc), all with failure and we don't even know which direction is the right one to take at this point. Can anyone help? Thanks!
Here's a basic example of what you're seeking.
document.getElementById('inp').onchange = function(e) {
var img = new Image();
img.onload = draw;
img.onerror = failed;
img.src = URL.createObjectURL(this.files[0]);
};
function draw() {
var canvas = document.getElementById('canvas');
canvas.width = this.width;
canvas.height = this.height;
var ctx = canvas.getContext('2d');
ctx.drawImage(this, 0,0);
}
function failed() {
console.error("The provided file couldn't be loaded as an Image media");
}
<input type="file" id="inp">
<canvas id="canvas"></canvas>
I am trying to load a Image from an url and draw it onto a canvas which is used as input for a Texture. I have implemented this on https://jsfiddle.net/9Louwn87/25/ . I have used this following snippet to load the image and create the texture
var img = new Image();
img.onload = function() {
canvas.width = size;
canvas.height = size;
ctx.drawImage(this, 0, 0, size, size);
if(texture)
{
texture.needsUpdate = true;
}
};
img.src = "https://threejsfundamentals.org/threejs/resources/images/wall.jpg";
texture = new THREE.Texture(canvas);
Please can anyone point me to the mistake.
The issue is probably that since you're loading the image yourself and you're loading it from another domain you need to request permission to use the image.
var img = new Image();
img.onload = function() {
canvas.width = size;
canvas.height = size;
ctx.drawImage(this, 0, 0, size, size);
if(texture)
{
texture.needsUpdate = true;
}
};
img.crossOrigin = 'anonymous'; // ----------- Add this line
img.src = "https://threejsfundamentals.org/threejs/resources/images/wall.jpg";
texture = new THREE.Texture(canvas);
note that adding that line does not automatically let you use an image from another website. Rather it asks that website for permission to use the image. Some sites (imgur, flickr, github, threejsfundamentals.org), give that permission. Most sites do not give permission. If the image is on the same domain then you generally do not want to set crossOrigin otherwise unless your server is configured to give permission you won't be able to use local images where as normally if you don't ask then local images just work.
Also, if you had opened the JavaScript console you'd have seen this error
three.min.js:572 Uncaught DOMException: Failed to execute 'texImage2D'
on 'WebGLRenderingContext': Tainted canvases may not be loaded.
One more thing, you can use three.js's ImageLoader which handles this permission issue automatically setting crossDomain if the image is on another domain and not setting it if it's local.
const loader = new THREE.ImageLoader();
loader.load("https://threejsfundamentals.org/threejs/resources/images/wall.jpg", function() {
canvas.width = size;
canvas.height = size;
ctx.drawImage(this, 0, 0, size, size);
if(texture)
{
texture.needsUpdate = true;
}
});
How would I convert a render to a .png image?
I've been looking around for awhile but nothing has worked.
Here is a function I use and a fiddle that shows it working.
function takeScreenshot() {
// For screenshots to work with WebGL renderer, preserveDrawingBuffer should be set to true.
// open in new window like this
var w = window.open('', '');
w.document.title = "Screenshot";
//w.document.body.style.backgroundColor = "red";
var img = new Image();
img.src = renderer.domElement.toDataURL();
w.document.body.appendChild(img);
// download file like this.
//var a = document.createElement('a');
//a.href = renderer.domElement.toDataURL().replace("image/png", "image/octet-stream");
//a.download = 'canvas.png'
//a.click();
}
I have code, which looks like this:
...
fileEntry.createWriter(function(fileWriter){
fileWriter.write(imageData);
}, error);
...
where imageData is base64 string of image.
Is it possible with phonegap (cordova) to create a image file (or phonegp plugin). Have not found anything for iOS.
Use this one
function encodeImageUri(imageData) {
var c = document.createElement('canvas');
var ctx = c.getContext("2d");
var img = new Image();
img.onload = function() {
c.width = this.width;
c.height = this.height;
ctx.drawImage(img, 0, 0);
};
img.src = imageData;
var dataURL = c.toDataURL("image/jpeg");
return dataURL;
}
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
});