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画布在客户端上处理图像（裁剪，合并）。您将从用户获取图像URI，使用您的水印在画布上绘制它，然后您将能够将其作为图像返回给用户，或者作为图像上传到服务器。

裁剪和水印以html格式上传的图像

1 个答案: