watermarkjs上传图片水印问题

Question

网上找了一个图片上传水印js插件，可以实现上传的图片，选择打水印位置 ，实时显示效果。但是提交保存到Amazon S3,求改成提交是用php保存到本地，还有选择那里，能不能选网络图片来打水印？

例子代码：图片水印js

Answer 1

预览那种图片内容是base64的，直接获取img的src属性值（图片base64字符串）提交到php页面就行了，自己弄个上传按钮，点击就传递那个base64字符串，服务器端php解码下base64还原为图片保存设置响应头content-disposition为attachment输出图片2进制数据即可保存

如果你要原始图片和水印。文件和水印位置传给php，调用php绘图类库绘制水印图片就行了

还有一种办法就是不考虑兼容ie，只用firefox或者chrome，可以用download属性结合a设置href为图片base64即可实现保存图片。

Amazon S3 Info前面增加下面的js代码，设置好水印位置后点击下载图片既可以保存图片到客户端

             <script>
                function setAttr(a) {
                    var img = document.getElementById('preview').getElementsByTagName('img')[0];
                    if (img) {
                        a.href = img.src;
                    }
                }
            </script>
            <h3>
                <a href="" download="xxx.jpg" onclick="setAttr(this)">下载图片</a>
            </h3>
                          <h3>Amazon S3 Info</h3>