Преобразовать холст ошибки base64

Question

Результат преобразования является нулевым PNG изображения, пожалуйста помогите мне

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"); \t 
 
    ctx.drawImage(img, 0, 0, img.width, img.height); 
 
var dataurl = canvas.toDataURL().replace("data:image/jpeg;base64,", ""); 
 
    localStorage.setItem("img", dataurl); 
 
\t $('#bannerImg').attr('src', dataurl);

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

Answer 1

Вы должны включить все (рисунок на холсте + чтение из него + установка этого в другом месте) в onload случае изображения. Он не работает над этим фрагментом (вызов toDataURL) из-за проблемы междоменного доступа, но он должен работать на вашем веб-сайте.

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'>

Answer 2

Использование document.getElementById('bannerImg').setAttribute('src', dataurl); вместо.

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(); 

Пример: https://jsfiddle.net/atg5m6ym/6152/