저장 로컬 저장소에 캔버스와 나는 캔버스 이미지가

Question

모든 캔버스 이름을로드하고 나는 로컬 스토리지로, 나는이 HTML .thanks

var img = new Image(); 
 
    \t //Wait for image to load before doing something with content 
 
    \t img.onload = function() {   
 
     \t var canvas = document.querySelectorAll("canvas[name=myCanvas]"); 
 
    \t \t for (var i = 0; i < canvas.length; i++) { 
 
    \t   canvas[i].getContext("2d").drawImage(img,10,10); 
 
     } 
 
    \t }; 
 
    \t img.src = 'http://i.imgur.com/VdXQ7z6.png'; 
 
     localStorage.setItem("img", img);

<p>Image to use:</p> 
 
<img id="scream" onload="draw(this)" src="http://i.imgur.com/VdXQ7z6.png" alt="The Scream" width="220" height="277"> 
 

 
<p>Canvas:</p> 
 
<canvas name="myCanvas" width="250" height="300" style="border:1px solid #d3d3d3;"> 
 
Your browser does not support the HTML5 canvas tag.</canvas> 
 
<canvas name="myCanvas" width="250" height="300" style="border:1px solid #d3d3d3;"> 
 
Your browser does not support the HTML5 canvas tag.</canvas> 
 
<canvas name="myCanvas" width="250" height="300" style="border:1px solid #d3d3d3;"> 
 
Your browser does not support the HTML5 canvas tag.</canvas>

의 모든 캔버스 이름에 캔버스를로드 할 것인지 저장할

Answer 1

이미지 개체 대신 이미지 URL을 저장할 수 있습니다. localStorage은 임의의 데이터가 아닌 문자열 만 저장할 수 있습니다.

base64 인코딩을 사용하려는 경우 here's a demo on JSFiddle. 나는 스택 조각에 그것을 할 것이다 그러나 이미지 데이터를 처리 할 때 너무 많은 제한이있다, 그래서 대신에, 여기에 모든 자바 스크립트 코드의 한 :

나는이었다 hackday project 위해 얼마 전에 비슷한 일을했다

var input = document.getElementById('upload'); 

var canvas1 = document.getElementById('disp'); 
var context1 = canvas1.getContext('2d'); 

var canvas2 = document.getElementById('test'); 
var context2 = canvas2.getContext('2d'); 

function processBlob(blob, callback) { 
    console.log('generating image from blob'); 

    var blobURL = URL.createObjectURL(blob); 

    var img = new Image(); 

    img.addEventListener('load', function() { 
    console.log('blob url loaded'); 

    URL.revokeObjectURL(blobURL); 

    // 'this' is img 
    callback.apply(this, arguments); 
    }); 

    img.src = blobURL; 
} 

function drawImage(canvas, context, image) { 
    console.log('drawing image to ' + canvas.id); 

    var width = image.naturalWidth; 
    var height = image.naturalHeight; 

    canvas.width = width; 
    canvas.height = height; 

    context.drawImage(image, 0, 0, width, height); 
} 

function storeImage(canvas, itemName) { 
    console.log('storing image from ' + 
       canvas.id + ' to ' + itemName); 

    // remove 22 byte header from base64 
    var dataURL = canvas.toDataURL('image/png').slice(22); 

    localStorage.setItem(itemName, dataURL); 
} 

function loadImage(itemName, callback) { 
    console.log('loading image from ' + itemName); 

    var dataURL = localStorage.getItem(itemName); 
    var binary = atob(dataURL); 
    var uint8 = new Uint8Array(binary.length); 

    for (var i = 0; i < binary.length; i++) { 
    uint8[i] = binary.charCodeAt(i); 
    } 

    var blob = new Blob([uint8], { type: 'image/png' }); 

    processBlob(blob, callback); 
} 

console.log('start of program'); 
input.addEventListener('change', function() { 
    var file = this.files[0]; 

    console.log('processing ' + file.name); 

    processBlob(file, function() { 
    console.log('callback for file image'); 

    drawImage(canvas1, context1, this); 
    storeImage(canvas1, 'myImage'); 

    loadImage('myImage', function() { 
     console.log('callback for localStorage image'); 

     drawImage(canvas2, context2, this); 
    }); 
    }); 
}); 

Answer 2

트위터에 이미지를 곧바로 올릴 수는 있지만 로컬 저장 장치를 사용하지는 않았지만 이렇게하면 원하는 작업을 수행 할 수 있습니다.

캔버스 이미지를 base64로 변환 한 다음 base64에서 이진으로 변환해야합니다. 이것은 .toDataURL()과 dataURItoBlob()

을 사용하여 완료되었습니다. 몇 가지 SO 답변, 다양한 블로그 게시물 및 자습서를 함께 연결해야하는 상당히 까다로운 과정이었습니다. I've created a tutorial you can follow which walks you through the process.