移动端H5如何实现带图评论

[zpjshiwo77]

需求是：1.带图评论；2.多图预览；3.预览删除；4.压缩图片。

首先，因为是要求今天要改好BUG（原来是其他人做的，做的不好，我想重做），所以先问一下有没有相应的插件。

然后，如果我要自己做的话，我这样的思路对不对：

通过canvas压缩图片放在一个数组中，并显示压缩图片。点击压缩图片，删除数组中对应图片。
然后用ajax上传图片和文字。

[zpjshiwo77]

引用 1 楼 functionsub 的回复:

既然是可以H5，那这些问题都不算复杂的事了。 图片压缩，这个肯定是得依靠canvas来做了，至于放在数组中，我觉得没必要啊 一个input file，change了之后生成一个canvas（或者画在canvas之后再获取到base64丢到img src里也行），删除这个预览的时候直接把这个input跟canvas(img)都删掉就行了，没必要用什么数组来维护了。 最后提交的时候，找到这些input跟评论内容，直接用H5的FormData+xhr2来搞就是。

谢谢·~直接用formdata不行吧，因为我要上传的是压缩后的图片，不是控件里面的图片。那这样我是要分两步上传吗？一个上传图片，一个上传控件去掉图片文件的内容。

[functionsub]

你要是要上传压缩后的图片，那就得把图片画到canvas里面后，再取到base64，最后上传这个base64了。 这样不用formdata也行，base64直接传后台，后台直接保存成文件也行，直接持久化到数据库也行，跟你没关系了。 你在其他地方显示的时候用url或者base64都没啥问题。 唯一问题大概就是如果用base64的话，请求响应内容太大了- -。。所以最好是让后台保存成图片，并且持久化url吧。 最后问一句：你说的压缩应该是把图片同比例缩放的意思吗？？

[Go 旅城通票]

多图预览是什么意思？file multiple一个控件选择多个文件？

如果是遍历dom.files对象结合canvas得到压缩的图片base64串，然后创建img标签添加到dom中，src设置为base64字符串来预览，同时ui做好控制，增加一个删除操作浮动到对应图片上，点击按钮删除此图片。

点击上传时遍历没有被删除的img对象的src，用ajax post这些src到服务器转为图片保存什么的

参考：javascript使用canvas压缩图像

[zpjshiwo77]

引用 4 楼 functionsub 的回复:

你要是要上传压缩后的图片，那就得把图片画到canvas里面后，再取到base64，最后上传这个base64了。 这样不用formdata也行，base64直接传后台，后台直接保存成文件也行，直接持久化到数据库也行，跟你没关系了。 你在其他地方显示的时候用url或者base64都没啥问题。 唯一问题大概就是如果用base64的话，请求响应内容太大了- -。。所以最好是让后台保存成图片，并且持久化url吧。 最后问一句：你说的压缩应该是把图片同比例缩放的意思吗？？

同比例缩放是其一，还要把它压缩成 100KB左右的图片（一般相机是2MB左右）。 我在额外问一下吧，我们后端希望我是在表单上传的时候再AJAX上传图片，那这样是不是要分成两个表单，不然图片会不会表单传了一次，AJAX又传了一次？

[functionsub]

你要前端压缩图片的话，而且上传的是这个压缩后的图片，那没法用表单提交了啊，压缩后的只能是base64编码，你也只能传这个去后台，至于原图的input无视掉就是了。

[functionsub]

既然是可以H5，那这些问题都不算复杂的事了。 图片压缩，这个肯定是得依靠canvas来做了，至于放在数组中，我觉得没必要啊 一个input file，change了之后生成一个canvas（或者画在canvas之后再获取到base64丢到img src里也行），删除这个预览的时候直接把这个input跟canvas(img)都删掉就行了，没必要用什么数组来维护了。 最后提交的时候，找到这些input跟评论内容，直接用H5的FormData+xhr2来搞就是。

[KK3K2005]

我 觉得 显示 缩略图 不要canvas 只要 img减小尺寸久可以了吧