裁剪并加水印以 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 上传的图像的主要内容,如果未能解决你的问题,请参考以下文章