I am trying to get dataURL of Salesforce ContentVerison using canvas.toDataURL in LWC method but I am getting the following CORS policy error:
"error image"
LWC html code:
<template>
<div id="full-screen-image" class="full-screen-image">
<img data-id="prev-image" src="/sfc/servlet.shepherd/version/renditionDownload?rendition=ORIGINAL_Png&versionId=06821000001Gsm8AAC&operationContext=CHATTER&contentId=05T21000004x5ga" class="testImage">
<canvas id="myCanvas" class="slds-hide" data-id="prev-canvas" style="border:1px solid #d3d3d3;"></canvas>
</div>
</template>
JS code
handleRotateRight() {
var image = this.template.querySelector('[data-id="prev-image"]');
var canvas = this.template.querySelector('[data-id="prev-canvas"]');
var context = canvas.getContext('2d');
let img = new Image();
img.crossOrigin = "anonymous";
img.src = image.src;
img.onload = function() {
canvas.width = img.width;
canvas.height = img.height;
context.translate(canvas.width / 2,canvas.height / 2);
context.rotate(Math.PI/2);
context.drawImage(img, -img.width / 2, -img.height / 2);
//convert to png image as dataURL
var dataURL = canvas.toDataURL("image/png");
console.log('dataURL-->', dataURL);
//convert that as base64 encoding
var convertedDataURI = dataURL.replace(/^data:image\/(png|jpg);base64,/, "");
console.log('convertedDataURI-->', convertedDataURI);
}
}
Related
I've no idea why this doesn't work. The src attribute of the image is changed with the new data, but the image is not actually visible. I tried with several different images. It's just javascript in a browser and Jquery is required.
<body>
<img src="" id="test">
</body>
<script>
const canvas = document.createElement("canvas");
const ctx = canvas.getContext("2d");
let img = new Image();
img.onload = getIt
img.src = 'download.png';
function getIt() {
canvas.width = this.width;
canvas.height = this.height;
const imageData = ctx.getImageData(0, 0, this.width, this.height);
ctx.drawImage(this, canvas.width , canvas.height);
ctx.putImageData(imageData, canvas.width, canvas.height);
$('#test').get(0).src = canvas.toDataURL("image/png");
}
</script>
I tried with several different images, all png. At the moment this is the entire code for the project so I don't foresee anything that could be interfering with it.
The result is this but the image cannot be seen:
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAAeCAYAAAAhDE4sAAAAMklEQVRIS+3SsQ0A....etc" id="test">
EDIT: It seems like it might be getting the data from the image incorrectly but I've no idea why...I mean why would it get the data but be incomplete or incorrect?
Please try this:
(You don't need to get or put the image data)
Also you were doing this:ctx.putImageData(imageData, canvas.width, canvas.height);. This means that you are drawing the image totally outside the canvas. Do this instead: ctx.putImageData(imageData, 0,0);
const canvas = document.createElement("canvas");
const ctx = canvas.getContext("2d");
let img = new Image();
img.onload = getIt
img.src = "download.png";
function getIt() {
canvas.width = this.width;
canvas.height = this.height;
//draw the image onto the canvas
ctx.drawImage(this, 0,0);
//use the data uri
test.src = canvas.toDataURL("image/png");
}
<img src="" id="test">
I want to convert image to base64 but the value is not complete?
<img crossorigin="anonymous" id="imageid" src="{{helper.photo_1}}" />
function getBase64Image(img) {
var canvas = document.createElement("canvas");
canvas.width = img.width;
canvas.height = img.height;
var ctx = canvas.getContext("2d");
ctx.drawImage(img, 0, 0);
var dataURL = canvas.toDataURL("image/png");
return dataURL
}
var base64 = getBase64Image(document.getElementById("imageid"));
console.log(base64); // the value is not complete.
When I use the base64 to show image, this is what it looks like:
I need to read the image data from an image object in javascript.
But my code returns always a blank array (set to 255)
<html>
<header>
</header>
<body>
<input type="file" id="imgfile" onchange="testImageData(event);" />
<canvas id="canvas1" width="640" height="480"></canvas>
<script src="./../scripts/cam.js" ></script>
</body>
</html>
Here is the script
var canvas1 = document.getElementById('canvas1');
var context1 = canvas1.getContext('2d');
function getImageData(image){
/*
returns Uint8ClampedArray object
takes an image obj
*/
var canvas = document.createElement("canvas");
canvas.height = image.height;
canvas.width = image.width;
var ctx = canvas.getContext("2d");
ctx.width = image.width;
ctx.height = image.height;
ctx.drawImage(image,0,0);
return ctx.getImageData(0, 0, ctx.width, ctx.height);
}
function testImageData(event){
var selectedFile = event.target.files[0];
var reader = new FileReader();
var img = new Image();
reader.onload = function(event) {
console.log('onload');
img.src = event.target.result;
img.onload = function(){
context1.drawImage(img, 0,0, img.width, img.height);
var imgData = getImageData(img);
// console.log(imgData);
var data = imgData.data;
for(var i = 0; i<data.length;i+=4){
console.log(data[i],data[i+1],data[i+2],data[i+3]);
}
}
};
In my understanding, the console.log should return me the data in RGBA.
But I'm just getting 255.
console.log output
EDIT:
Okay I found a work around but I don't understand why this is working.
Instead using getImageData, I get the data directly from the drawn context1.
function testImageData(event){
var selectedFile = event.target.files[0];
var reader = new FileReader();
var img = new Image();
reader.onload = function(event) {
console.log('onload');
img.src = event.target.result;
img.onload = function(){
context1.drawImage(img, 0,0, img.width, img.height);
var imgData = context1.getImageData(0,0,img.width,img.height);
var data = imgData.data;
for(var i = 0; i<data.length;i+=4){
console.log(data[i],data[i+1],data[i+2],data[i+3]);
}
}
};
So the problem must lie in creating a new canvas.
You should wait for the image to load img.onload you are waiting for the readers onload event...
you also forget to read the file... missed reader.readAsDataURL
but you don't need the filereader.
window.URL = window.URL || webkitURL
var img = new Image();
img.src = URL.createObjectURL(file)
img.onload = function(){
// put your image on the canvas
}
I am trying to get base64 data from image url but it always return "data:"
Here's the code :
function getBase64Image(imgurl) {
var canvas = document.createElement("canvas");
var img = new Image();
img.src = imgurl;
canvas.width = img.width;
canvas.height = img.height;
var ctx = canvas.getContext("2d");
ctx.drawImage(img, 0, 0);
var dataURL = canvas.toDataURL("image/png");
console.log(dataURL);
return dataURL.replace(/^data:image\/(png|jpg);base64,/, "");
}
Use img.onload to execute the code after your image has loaded. Use a callback function to report back the dataURL.
function getBase64Image(imgurl, callback) {
var canvas = document.createElement("canvas");
var ctx = canvas.getContext("2d");
var img = new Image();
img.onload = function() {
canvas.width = img.width;
canvas.height = img.height;
ctx.drawImage(img, 0, 0);
var dataURL = canvas.toDataURL("image/png");
dataURL = dataURL.replace(/^data:image\/(png|jpg);base64,/, "");
if (typeof callback === 'function') {
callback(dataUrl);
}
};
img.src = imgurl;
}
In my application i have added the code to convert the image into base 64 with a resized images.When i try the following code the image part has been cropped.
function getBase64FromImageUrl(URL)
{
var img = new Image();
img.style.width = this.width,
img.style.height = this.height,
img.src = URL;
img.onload = function ()
{
var canvas = document.createElement("canvas");
canvas.width =150
canvas.height =150;
var ctx = canvas.getContext("2d");
ctx.drawImage(this, 10, 10);
var dataURL = canvas.toDataURL("image/jpg");
c=dataURL.replace(/^data:image\/(png|jpg);base64,/, "");
return c;
}
}
How to get the full image properly?What change requires in the code
function encodeImage(src, callback) {
var canvas = document.createElement('canvas'),
ctx = canvas.getContext('2d'),
img = new Image();
img.onload = function() {
canvas.width = img.width;
canvas.height = img.height;
ctx.drawImage(img, 0, 0, img.width, img.height);
callback(canvas.toDataURL());
}
img.src = src;
}
See this fiddle:
http://jsfiddle.net/NwaPT/3/