[英]How to apply cropping to image with cropper.js?
我试图实现,如何使用cropper.js,到目前为止它看起来还不错,但是......当我尝试裁剪图像时,如何将结果放回我的表单?
我的输入有 id 'profile_avatar'。 所以我尝试将更新的图像放在那里,但不能。
$('#cut_button').click(function(e) {
e.preventDefault();
var croppedImageDataURL = cropper.getCroppedCanvas()
$('#profile_avatar').val(croppedImageDataURL.toDataURL("image/png"))
});
但是当我点击“剪切按钮”时,我得到了
InvalidStateError: An attempt was made to use an object that is not, or is no longer, usable
在控制台中。 我究竟做错了什么? 我试图打败它几个小时。 太感谢了!
带有视图的苗条文件:
= form_for @profile do |f|
= f.label :avatar
= f.file_field :avatar
.canvas_window
canvas id='canvas'
.preview
= link_to('Cut', '', id: 'cut_button')
= f.label :photos
= f.file_field :photos, multiple: true
= f.label :description
= f.text_area :description
= @profile.errors.messages[:description].presence
= hidden_field :dimensions, ''
= f.submit I18n.t('user.forms.buttons.submit')
javascript:
var canvas = $("#canvas"),
context = canvas.get(0).getContext("2d"),
$result = $('#result');
$('#profile_avatar').on( 'change', function(){
console.log('start')
if (this.files && this.files[0]) {
if ( this.files[0].type.match(/^image\//) ) {
var reader = new FileReader();
reader.onload = function(evt) {
var img = new Image();
img.onload = function() {
context.canvas.height = img.height;
context.canvas.width = img.width;
context.drawImage(img, 0, 0);
const image = document.getElementById('canvas');
const cropper = new Cropper(image, {
preview: '.preview',
aspectRatio: 16 / 9,
crop(event) {
dimensions = event.detail.width + 'x' + event.detail.width + '+' + event.detail.x + '+' + event.detail.y
$('#new_profile input#dimensions_').val(dimensions)
console.log(dimensions);
console.log(event.detail.x);
console.log(event.detail.y);
console.log(event.detail.width);
console.log(event.detail.height);
},
});
$('#cut_button').click(function(e) {
e.preventDefault();
var croppedImageDataURL = cropper.getCroppedCanvas()
HERE IS ERROR \/
$('#profile_avatar').val(croppedImageDataURL.toDataURL("image/png"))
console.log(croppedImageDataURL.toDataURL("image/png"))
});
};
img.src = evt.target.result;
};
reader.readAsDataURL(this.files[0]);
}
else {
alert("Invalid file type! Please select an image file.");
}
}
else {
alert('No file(s) selected.');
}
});
html :
<form class="new_profile" id="new_profile" enctype="multipart/form-data" action="/profiles" accept-charset="UTF-8" method="post">
<input type="hidden" name="authenticity_token" value="j53mqq1th1kb17ynj2jxIMcPFRC210EQVLBSgEu2n4FLOONtFBH3Vu7wrjc+iDrogn99H/emvN5qUdyZo2pAkg==">
<label for="profile_avatar">Avatar</label>
<input type="file" name="profile[avatar]" id="profile_avatar">
<div class="canvas_window">
<canvas id="canvas"></canvas>
</div>
<div class="preview"></div>
<a id="cut_button" href="">Cut</a>
<label for="profile_photos">Photos</label>
<input multiple="multiple" type="file" name="profile[photos][]" id="profile_photos">
<label for="profile_description">Description</label>
<textarea name="profile[description]" id="profile_description"></textarea>
<input type="hidden" name="dimensions[]" id="dimensions_">
<input type="submit" name="commit" value="Submit" data-disable-with="Submit">
</form>
突出的一件事是您需要将图像的源设置为toDataUrl()
的 output 。 例如:
HTML:
<img id="cropped_image" src="/blank.gif"></img>
JS:
$("#cropped_image").attr("src", croppedImageDataURL.toDataURL("image/png"));
您可以使用 JavaScript 即时创建该图像,或者在您的标记中包含<img/>
标签并使用空白图像或隐藏(在添加裁剪图像后显示它)。
要在表单中传递图像,您应该使用输入字段,因为此时的值是一个字符串(例如“data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNby”)。
HTML:
<input id="cropped_image" type="hidden" />
JS:
$("#cropped_image").val(croppedImageDataURL.toDataURL("image/png"));
如果您的服务器需要文件作为输入,请检查此链接。
整体流程是:CroppedData() -> Base64 image -> Blob -> File ===> Send to Server
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.