如何展示上传的图片存储在本地存储
如何展示上传的图片存储在本地存储
提问于 2012-06-27 22:09:53
我已经制作了一个对象，其中我存储了用户的姓名，年龄，电子邮件和他上传的图像。我想显示他上传的图片在一个div(比方说)，我不知道如何做这件事。我已经尝试过了：
$(function () {
$('img').load(function () {
var canvas = document.createElement("canvas");
canvas.width = this.width;
canvas.height = this.height;
// Copy the image contents to the canvas
var ctx = canvas.getContext("2d");
ctx.drawImage(this, 0, 0);
localStorage[this.id] = canvas.toDataURL("image/png");
})
})但是如何使用javascript或jquery来显示这个图像呢？(没有任何插件)我有5个这样的对象显示在页面上。任何解决方案都会有所帮助。谢谢
回答 2
Stack Overflow用户
发布于 2014-07-10 16:10:32
试试这个，它工作得很好
<input type="file" id="image-input" />
<img id="image-container" />
<script type="text/javascript">
(function(){
/** @type {Node} */
var imgInput = document.getElementById( "image-input" ),
/** @type {Node} */
imgContainer = document.getElementById( "image-container" ),
/** Restore image src from local storage */
updateUi = function() {
imgContainer.src = window.localStorage.getItem( "image-base64" );
},
/** Register event listeners */
bindUi = function(){
imgInput.addEventListener( "change", function(){
if ( this.files.length ) {
var reader = new FileReader();
reader.onload = function( e ){
window.localStorage.setItem( "image-base64", e.target.result );
updateUi();
};
reader.readAsDataURL( this.files[ 0 ] );
}
}, false );
};
updateUi();
bindUi();
}());Stack Overflow用户
发布于 2014-10-25 02:33:41
尝尝这个
var imgCanvas = document.createElement("canvas"),
imgContext = imgCanvas.getContext("2d");
// Make sure canvas is as big as the picture
imgCanvas.width = this.width;
imgCanvas.height = this.height;
// Draw image into canvas element
imgContext.drawImage(image, 0, 0, imgCanvas.width,imgCanvas.height);
// Save image as a data URL
imgInfom = imgCanvas.toDataURL("image/png");
localStorage.setItem("imgInfo",imgInfom);
document.body.style.background = 'url('+imgInfom+')';在这里我显示的图像作为身体的背景图像，你也可以使用其他选项。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/11228159
复制相关文章
相似问题
腾讯云开发者
