javascript - 上传前更改图像方向
问题描述
我正在使用此答案在标签中显示上传的图像,img
并且我还可以使用loadImage()
答案中提到的内容更改图像的方向。
我的问题是我无法用input
标签中上传的图像替换重新定向的图像。
除非提交表单,否则不会保存图像。所以我也不能在 AJAX 中做到这一点。任何帮助深表感谢。
$('img#image-pre').click(function(e) {
var loadingImage = loadImage($('input#uploadform-file')[0].files[0], function(img) {
var dataURI = img.toDataURL();
document.getElementById("image-pre").src = img.toDataURL();
$('input#uploadform-file')[0].files[0] = function(dataURI) { // create the new blob from the changed image.
var binary = atob(dataURI.split(',')[1]);
var mimeString = dataURI.split(',')[0].split(':')[1].split(';')[0];
var array = [];
for (var i = 0; i < binary.length; i++) {
array.push(binary.charCodeAt(i));
}
return new Blob([new Uint8Array(array)], {
type: mimeString
});
};
}, {
orientation: or,
maxWidth: 500,
maxHeight: 300,
minWidth: 100,
minHeight: 50,
});
or = or <= 8 ? or + 1 : 1;
console.log($('input#uploadform-file')[0].files[0]);
});
解决方案
你可能想看看这个: https ://stackoverflow.com/a/20285053/1990724
您可以将图像解析为 base64 字符串,然后使用 ajax 您可以将 base64 字符串发布到服务器。这可以在您让用户以正确的方式定位图像之后完成。
推荐阅读
- common-lisp - eq/eql/equal 如何在白名单中工作?
- r - 如何计算分组行/观察的数量?
- javascript - 无法理解为什么添加 javascript 会停止网站搜索结果
- java - 将 sql 数据转换为 Json 数组 [java spark]
- android - 如何在 1 个 Playstore 项目中上传 2 个不同风格的应用程序
- c++ - #define/macro 返回指向同一文件中给定函数的函数指针
- javascript - NGX倒计时计时器未准确倒计时'leftTime'参数大于24小时
- oracle - 在 Oracle PL/SQL 中编码 JWT 令牌
- docker - 如何设置 docker squid 容器和主机以将请求从容器主机路由到 Internet?
- php - 如何最好地实现一对多关系 Laravel