裁剪并为在html中上传的图像加水印

Question

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

<input type='file' onchange="readURL(this);" />
    <img id="blah" class="watermark" src="#" alt="your image" />
 <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]);
            }
        }

Answer 1

使用html canvas在客户端上处理图像（裁剪，合并）。 您将从用户那里获得图像URI，并在其上加上水印将其绘制在画布上，然后便可以将其作为图像返回给用户，或作为图像上传到服务器。