裁剪并加水印以 html 上传的图像

Posted 2023-02-25

【中文标题】裁剪并加水印以 html 上传的图像

【英文标题】：crop and watermark an image uploaded in html

【发布时间】：2015-02-04 09:04:11

【问题描述】：

我想创建一段代码，允许用户上传图像并立即显示、裁剪并在其上方带有水标记，他们可以右键单击并保存。我想使用 java/html 使它可以在线上传。到目前为止，此代码使我能够上传和显示没有任何裁剪或水印的照片。我希望这是可保存的，因此使用 html 将照片简单地放在图像上是行不通的。

<input type='file' onchange="readURL(this);" />
    <img id="blah" class="watermark" src="#"  />
 <script>
     function readURL(input) 
            if (input.files && input.files[0]) 
                var reader = new FileReader();

                reader.onload = function (e) 
                    $('#blah')
                        .attr('src', e.target.result)
                        .width("100%")
                        .height("100%");
                ;

                reader.readAsDataURL(input.files[0]);
            
        

【问题讨论】：

您可以使用我的下载脚本将您的 img 预览 dataURL 保存到用户的下载文件夹 github.com/rndme/download，但看起来您的 img 并没有实际调整图像，所以这可能对您没有帮助： （

【参考方案1】：

使用 html 画布在客户端处理图像（裁剪、组合）。您将从用户那里获取图像 URI，将其与您的水印一起绘制在画布上，然后您将能够将其作为图像返回给用户，或者作为图像上传到服务器。