Отображение изображения холста с одного холста на другой с помощью base64

Question

Например, var new = canvas.toDataURL("image/png");

Я хочу, чтобы base64, присутствующий в этой новой переменной, отображался во втором элементе canvas, который присутствует.Но он не отображает изображение base64, используя метод drawimage.Это работает, если я использую, скажем image.png

Answer 1

Вы не должны использовать base64 для копирования холста.Вы можете передать исходный холст в контекстный метод целевого холста drawImage.

В противном случае вы получите серьезный удар по производительности.См. Мой тест jsperf на http://jsperf.com/copying-a-canvas-element.

drawImage(), который принимает Canvas, а также Image объект.

Попробуйте это:

//grab the context from your destination canvas
var destCtx = destinationCanvas.getContext('2d');

//call its drawImage() function passing it the source canvas directly
destCtx.drawImage(sourceCanvas, 0, 0);

Answer 2

1. Сначала создайте элемент изображения и укажите источник изображения в качестве кэшированного .DataURL() источника

2. Используя изображение <img /> (которое мы создали ранее), рисуем содержимое изображения на втором элементе Canvas

например:.

window.onload = function() { 
    var canvas1 = document.getElementById('canvas1');
    var canvas2 = document.getElementById('canvas2');
    var ctx1    = canvas1.getContext('2d');
    var ctx2    = canvas2.getContext('2d');

    var src     = canvas.toDataURL("image/png"); // cache the image data source

    var img     = document.createElement('img'); // create a Image Element
    img.src     = src;   //image source

    ctx2.drawImage(img, 0, 0);  // drawing image onto second canvas element
};