html5-canvas: Преобразование файла изображения в DataURL throws Uncaught TypeError

Я пытаюсь получить URL-адрес Base64/Data выбранного файла изображения в Javascript. Пользователь в основном выбирает изображение через элемент управления «Вход в файл» и генерирует URL-адрес данных. Тем не менее, я получаю эту ошибку:html5-canvas: Преобразование файла изображения в DataURL throws Uncaught TypeError

Uncaught TypeError: Failed to execute 'drawImage' on 'CanvasRenderingContext2D': The provided value is not of type '(HTMLImageElement or HTMLVideoElement or HTMLCanvasElement or ImageBitmap)'

HTML:

<body> 
    <form id="form1"> 
    <div> 
     <input type="file" id="imageinput" onchange="testit(event)" /> 
     <canvas width="300" height="300" id="mycanvas" style="display: none;"></canvas> 
    </div> 
    </form> 
</body>

Javascript:

function testit(event) { 

      var myImage = URL.createObjectURL(event.target.files[0]); 

      var myCanvas = document.getElementById('mycanvas'); 

      var ctx = myCanvas.getContext('2d'); 

      ctx.drawImage(myImage, 0, 0); 

      var mydataURL = myCanvas.toDataURL('image/jpg'); 

      alert(mydataURL); 

     }

Почему не этот код работает, ребята?

источник

2015-10-08 Dinuka

вам нужно поместить этот URL на СРК давал IMG тега, а затем передать IMG на холсте рисовать, после загрузки. – dandavis

Вы не можете сделать изображение из URL непосредственно на холст. Для этого вам нужно создать элемент/объект изображения.

var myCanvas = document.getElementById('mycanvas'); 
var ctx = myCanvas.getContext('2d'); 
var img = new Image(); 
img.onload = function(){ 
    ctx.drawImage(img, 0, 0); 

    alert(myCanvas.toDataURL('image/jpeg')); 
}; 

img.src = URL.createObjectURL(event.target.files[0]);

Здесь мы создали image объект и установить src для выбранного пользователем URL изображения. После загрузки изображения мы добавляем его в холст.

EDIT:

Здесь у нас есть еще одна проблема. Каким бы ни был размер изображения, вы всегда получите обрезанный файл данных размером 300x300 из-за ширины и высоты статического холста. Таким образом, мы можем динамически устанавливать ширину и высоту на холст после загрузки изображения. Мы можем использовать console.log() вместо alert(), чтобы вы могли открывать и видеть изображение с консоли в своем браузере.

myCanvas.width = img.width; 
myCanvas.height = img.height;

Вот окончательный код:

var myCanvas = document.getElementById('mycanvas'); 
var ctx = myCanvas.getContext('2d'); 
var img = new Image(); 
img.onload = function(){ 
    myCanvas.width = img.width; 
    myCanvas.height = img.height; 

    ctx.drawImage(img, 0, 0); 

    console.log(myCanvas.toDataURL('image/jpeg')); 
}; 

img.src = URL.createObjectURL(event.target.files[0]);

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

UPDATE:

Как уже упоминалось @Kaiido, Он будет производить PNG изображение, так как 'изображение/JPG' не MimeType. 'image/jpeg' - это mimetype для изображений JPG и JPEG.

Обновлено Fiddle:

http://jsfiddle.net/k7moorthi/r8soo95p/4/

источник

2015-10-08 20:06:17 Kesavan

Ваш код хорошо работает на скрипке. Однако, когда я добавил это в заголовок внутри тега Почему это? – Dinuka

Мне не нужно jquery.Я добавил его в скрипке для удобства использования. Вы можете сделать это с помощью обычного javascript. В вашем коде просто замените тело функции на конечный код в части ответа моего ответа. Чтобы увидеть результат, перейдите в консоль вашего браузера. – Kesavan

Работает. Спасибо, что нашли время! Очень полезно! – Dinuka

Вы пытаетесь нарисовать URL-адрес объекта на холсте. вам нужно создать изображение в памяти первого

http://jsfiddle.net/zmtu6t6c/4/

var myImageUrl = URL.createObjectURL(event.target.files[0]); 
var myImage = new Image(); 
myImage.src = myImageUrl; 

myImage.onload = function(){ 

... then do the canvas stuff 

}

источник

2015-10-08 19:50:01

Ожидание события загрузки не требуется? –

Нет, не нужно. добавив скрипку –

Для меня результат белый квадрат 300 * 300 –

html5-canvas: Преобразование файла изображения в DataURL throws Uncaught TypeError

ответ

Смежные вопросы