2 gdljw gdljw 于 2016.09.13 10:20 提问

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

图片说明

例子代码:图片水印js

1个回答

showbo
showbo   Ds   Rxr 2016.09.13 11:32

预览那种图片内容是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>
Csdn user default icon
上传中...
上传图片
插入图片