使用JavaScript将本地图片加载到浏览器中?
image-processing
javascript
5
0

我目前正在开发一种针对Web打印的海报打印应用程序的解决方案。

我要包括的功能之一是在订购该图像的海报之前,可以“编辑”(裁剪/缩放/旋转)给定图像的功能。

为了避免用户在编辑之前将图像上传到远程服务器的要求,我想知道以下几点:

是否可以(使用JavaScript)将客户端计算机上存储的图像加载到浏览器/浏览器内存中进行编辑,而无需将图像上传到远程服务器?如果是这样,如何完成?

谢谢,

BK

参考资料:
Stack Overflow
收藏
评论
共 2 个回答
高赞 时间 活跃

无需用户将图像上载到服务器即可编辑图像。

看一下下面的链接。它可以很容易地完成。

使用Javascript读取本地文件

收藏
评论

是的你可以!但是为了做到这一点,浏览器必须支持本地存储!它是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

收藏
评论
新手导航
  • 社区规范
  • 提出问题
  • 进行投票
  • 个人资料
  • 优化问题
  • 回答问题

关于我们

常见问题

内容许可

联系我们

@2020 AskGo
京ICP备20001863号