无需用户将图像上载到服务器即可编辑图像。
看一下下面的链接。它可以很容易地完成。
0
是的你可以!但是为了做到这一点,浏览器必须支持本地存储!它是HTML5 API,因此大多数现代浏览器都可以做到!请记住,本地存储只能保存字符串数据,因此您必须将图像更改为Blob字符串。 Y我们的图片来源看起来像这样
这是一个简短的片段,对您有帮助!
if(typeof(Storage)!=="undefined"){
// here you can use the localstorage
// is statement checks if the image is in localstorage as a blob string
if(localStorage.getItem("wall_blue") !== null){
var globalHolder = document.getElementById('globalHolder');
var wall = localStorage.getItem('wall_blue');
globalHolder.style.backgroundImage= "url("+wall+")";
}else{
// if the image is not saved as blob in local storage
// save it for the future by the use of canvas api and toDataUrl method
var img = new Image();
img.src = 'images/walls/wall_blue.png';
img.onload = function () {
var canvas = document.createElement("canvas");
canvas.width =this.width;
canvas.height =this.height;
var ctx = canvas.getContext("2d");
ctx.drawImage(this, 0, 0);
var dataURL = canvas.toDataURL();
localStorage.setItem('wall_blue', dataURL);
};
}}else{//here you upload the image without local storage }
希望您会发现此简短摘要有用。记住Localstorage只保存字符串数据,所以您不能
哦,顺便说一句,如果您使用jcrop裁剪图像,则必须将blob代码从图像保存到表单,然后手动将其发送到服务器,因为jcrop仅将图像作为文件处理,而不作为base64字符串处理。
祝好运! :D
0
我目前正在开发一种针对Web打印的海报打印应用程序的解决方案。
我要包括的功能之一是在订购该图像的海报之前,可以“编辑”(裁剪/缩放/旋转)给定图像的功能。
为了避免用户在编辑之前将图像上传到远程服务器的要求,我想知道以下几点:
是否可以(使用JavaScript)将客户端计算机上存储的图像加载到浏览器/浏览器内存中进行编辑,而无需将图像上传到远程服务器?如果是这样,如何完成?
谢谢,
BK