gdljw
gdljw
采纳率0%
2016-09-13 02:20 阅读 1.5k

watermarkjs上传图片水印问题

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

图片说明

例子代码:图片水印js

  • 点赞
  • 写回答
  • 关注问题
  • 收藏
  • 复制链接分享

1条回答 默认 最新

  • showbo GoCityPass新加坡曼谷通票 2016-09-13 03: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>
    
    点赞 评论 复制链接分享