Convert canvas to base64 error

Question

Result convert is null png image, pls help me

var img = new Image();
img.src = 'http://advs.jp/cp/barcode/code128.cgi?nt=1&height=80&c=Z103B5-190-311378&.png';
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d"); 
    ctx.drawImage(img, 0, 0, img.width, img.height);
var dataurl = canvas.toDataURL().replace("data:image/jpeg;base64,", "");
    localStorage.setItem("img", dataurl);
 $('#bannerImg').attr('src', dataurl);

  <img id="bannerImg" src="" alt="Banner Image" width="100%" height="200px" alt="Embbed Image"/>
<canvas id="myCanvas"></canvas>

score 4 · Accepted Answer · edited May 23 '17 at 12:13

4

You have to include everything (drawing to canvas + reading from it + setting this elsewhere) in the onload event of the image. It doesn't work on this snippet (the call to toDataURL) due to a cross-domain issue, but it shall work on your website.

An explanation of why it doesn't work here the call to toDataURL

var imgCanvas = function() {     
    var img = new Image();
    //Wait for image to load before doing something with content
    img.onload = function() {
        var canvas = document.getElementById("myCanvas");  
        //Set canvas size to fit the image
        canvas.style.height = img.height + 'px';
        canvas.style.width = img.width + 'px';
      
        //Draw the image in canvas
        var ctx = canvas.getContext("2d");    
        ctx.drawImage(img, 0, 0); 
      
        //Get a dataurl representation of the image where the image itself is in BASE64
        var dataurl = canvas.toDataURL();
      
        //Store it in localStorage
        localStorage.setItem("img", dataurl);  
      
        //Show image from localStorage
        //Need jQuery to use this line instead of next one : $('#bannerImg').attr('src', localStorage.getItem("img")); 
        document.getElementById('bannerImg').setAttribute('src', localStorage.getItem("img"));
    };
    img.src = 'http://advs.jp/cp/barcode/code128.cgi?nt=1&height=80&c=Z103B5-190-311378&.png';
};

imgCanvas();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
Canvas:<br>
<canvas id='myCanvas'></canvas>

<br><br>

Image from dataurl:<br>
<img id='bannerImg'>

edited May 23 '17 at 12:13

Community

1
1

answered Jun 22 '16 at 03:47

Master DJon

1,899
2
19
30

That is what you get with `$('#bannerImg').attr('src', dataurl); ` – Master DJon Jun 22 '16 at 03:52
Please help me export base64 image – Nguyễn Thành Nam Jun 22 '16 at 03:56
What do you mean by export ? To where ? Is the `dataurl` variable having something now ? (Answer all please) – Master DJon Jun 22 '16 at 03:58
i have a image URL, and i want to convert to base64 image and store on local storerage. – Nguyễn Thành Nam Jun 22 '16 at 04:00
I commented the code all over. I'm not sure I could me more clearer than that. I tested it on my local server and it works fine using an image coming from my local server. – Master DJon Jun 22 '16 at 04:09
how to convert from canvas to base64 image, pls help me Mr/Mss Master DJon – Nguyễn Thành Nam Jun 22 '16 at 04:16
Did you look at the content of `dataurl` variable ? – Master DJon Jun 22 '16 at 04:18
Then, didn't you see the BASE64 content there ? – Master DJon Jun 22 '16 at 04:20
yes i want to show base64 content at id="bannerImg" – Nguyễn Thành Nam Jun 22 '16 at 04:22
So, you do not want to show the image but the BASE64 string ? Because now it set the image from a BASE64 data url. – Master DJon Jun 22 '16 at 04:22
base64 string will fill into src and show base64 image – Nguyễn Thành Nam Jun 22 '16 at 04:27
1

Well, it is exactly doing that. If it doesn't work, look at the web development tools of your browser. You will probably see a cross-domain issue and this explanation is in the link I put in the answer. Not sure I can do more. – Master DJon Jun 22 '16 at 04:29
Is "advs.jp" your domain ? – Master DJon Jun 22 '16 at 04:31
So add the code I gave somewhere accessible for me and give me the URL. – Master DJon Jun 22 '16 at 04:33
my company send me a image url and request convert to base 64 , i dont know somewhere accessible... – Nguyễn Thành Nam Jun 22 '16 at 04:37
Well the URL for the image you gave is accessible. Can't you add an HTML page on this domain and give me the URL ? – Master DJon Jun 22 '16 at 04:39
i can't add anything... you can draw image and store in local storerage, then convert to base64 and show it ? – Nguyễn Thành Nam Jun 22 '16 at 04:42
All the answers are here. Take a pause and look carefully. Sorry, I would like to do more, but I doesn't have anything else to give you a hand. – Master DJon Jun 22 '16 at 04:44
I think you shall at least accept one of the answer, as both are correct (virtually the same). – Master DJon Jun 22 '16 at 04:47

gotnull · Answer 2 · 2016-06-22T03:59:39.597

0

Use document.getElementById('bannerImg').setAttribute('src', dataurl); instead.

var showImage = function() {     
    var img = new Image;
    img.onload = function() {
        var canvas = document.getElementById("myCanvas");  
        var ctx = canvas.getContext("2d");    
        ctx.drawImage(img, 0, 0);  
        var dataurl = canvas.toDataURL();
        localStorage.setItem("img", dataurl);  
        document.getElementById('bannerImg').setAttribute('src', dataurl); 
    };
    img.src = 'http://advs.jp/cp/barcode/code128.cgi?nt=1&height=80&c=Z103B5-190-311378&.png';
};

showImage();

Example: https://jsfiddle.net/atg5m6ym/6152/

edited Jun 22 '16 at 03:59

answered Jun 22 '16 at 03:42

gotnull

26,454
22
137
203

still null png image – Nguyễn Thành Nam Jun 22 '16 at 03:44
i need base64 image show on id="bannerImg"..thank you – Nguyễn Thành Nam Jun 22 '16 at 03:53
Updated to use `document.getElementById('bannerImg').setAttribute( 'src', dataurl);` instead. – gotnull Jun 22 '16 at 03:59
1

There is still a cross-domain issue. See the link I put in my answer. – Master DJon Jun 22 '16 at 04:16
Image from origin 'http://advs.jp' has been blocked from loading by Cross-Origin Resource Sharing policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'null' is therefore not allowed access. – gotnull Jun 22 '16 at 04:18
1

Exactly. That's why I mentioned the snippet wouldn't work here, but I tested on my local server to ensure (even I already did that, but you know memory). And it works fine if image is coming from local. – Master DJon Jun 22 '16 at 04:20

Convert canvas to base64 error

2 Answers2