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

Posted

技术标签:

【中文标题】裁剪并加水印以 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,将其与您的水印一起绘制在画布上,然后您将能够将其作为图像返回给用户,或者作为图像上传到服务器。

【讨论】:

以上是关于裁剪并加水印以 html 上传的图像的主要内容,如果未能解决你的问题,请参考以下文章

Thinkphp图片水印和文字水印

C#图片处理示例(裁剪,缩放,清晰度,水印)

下载时为图像加水印......可以吗?

装饰者模式

以编程方式为视频加水印

学习笔记-php图像加水印组合图像简单完美剪裁-2016.4.7