Ошибка «CanvasRenderingContext2D» при преобразовании jpeg в URL-адрес данных

Question

Я работал над своим хром-приложением, и политика безопасности содержимого была нервной. Я хотел получить jpeg-изображение из json (строка/объект/массив, который я не знаю), но csp меня останавливал каждый раз. Теперь я знаю, что с каналами передачи данных проще, поэтому I searched a converter.

function getdt(img) { 
    // Create an empty canvas element 
    var canvas = document.createElement("canvas"); 

    // Copy the image contents to the canvas 
    var ctx = canvas.getContext("2d"); 
    ctx.drawImage(img, 0, 0, img.width, img.height); 

    // Get the data-URL formatted image. 
    var dataURL = canvas.toDataURL("image/png"); 

    return dataURL.replace(/^data:image\/(png|jpg);base64,/, ""); 
} 

//Example 
getdt('http://ms01.oe3.fm/oe3metafiles/Pictures/200/929203.22.jpg'); 

К сожалению, это не сработает. Сообщение об ошибке заключается в следующем:

Uncaught TypeError: 
Failed to execute 'drawImage' on 'CanvasRenderingContext2D': 
No function was found that matched the signature provided. 

Я надеюсь, что кто-то может помочь мне :) Извините за мой плохой английский

Answer 1

У вас есть 3 проблемы с кодом:

1. Как @ A.Wolff, ваш img недействителен. Для холста требуется полный объект изображения, а не только URL. Таким образом, вы должны «новый вверх» объект изображения var img=new Image();

2. Изображение загружается асинхронно, так что вы должны использовать положить drawImage и toDataURLimg.onload внутри обратного вызова. Это позволяет полностью загрузить изображение, прежде чем пытаться его использовать. Это также означает, что вместо return dataURL вы также должны поместить весь код, который использует dataURL внутри обратного вызова onload. (Да, я знаю, это грязно, но вы должны сделать это так, иначе изображение не будет полностью загружено)

3. По соображениям безопасности, для использования toDataURL ваше изображение должно быть размещено в том же домене, веб-страница. Если они являются разными доменами, toDataURL завершится с ошибкой безопасности. Эта проблема безопасности является участием темы так вот, где вы можете узнать, что необходимо, чтобы избежать ошибок безопасности: http://enable-cors.org/

... А: JPG кодирования toDataURL использует image/jpeg так что вам нужно изменить Regex.

Вот код переработан и используя изображение, размещенную таким образом, чтобы не создавать Ошибка безопасности:

var canvas=document.getElementById("canvas"); 
 
var ctx=canvas.getContext("2d"); 
 
var cw=canvas.width; 
 
var ch=canvas.height; 
 

 

 
var img=new Image(); 
 
img.crossOrigin='anonymous'; 
 
img.onload=start; 
 
img.src="https://dl.dropboxusercontent.com/u/139992952/multple/sun.png"; 
 
function start(){ 
 

 
    canvas.width=img.width; 
 
    canvas.height=img.height; 
 
    ctx.drawImage(img,0,0); 
 
    var dataURL=canvas.toDataURL(); // png is the default format 
 

 
    dataURL=dataURL.replace(/^data:image\/(png|jpeg);base64,/, ""); 
 

 
    // Your dataURL is now available 
 
    // Use it as desired 
 
    alert('The dataURL is '+dataURL.length+' characters long ans starts with: '+dataURL.substring(0,20)); 
 

 
}

body{ background-color: ivory; padding:10px; } 
 
#canvas{border:1px solid red;}

<canvas id="canvas" width=300 height=300></canvas>