justin/discord-auto-upload
1
0
Fork 0
Code Issues 15 Pull Requests 1 Actions Packages Projects Releases 20 Wiki Activity

Use scalefactor to resize output appropriately and add a cancel function

Browse Source
This commit is contained in:
Justin Hawkins 2021-12-30 21:40:01 +10:30
parent 111a33bc8a
commit e049160cfc
1 changed files with 22 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

30
web/data/editor.html
View File

@ -12,10 +12,14 @@
<button type="button" @click="add_some_text()" class="btn btn-primary">Add text</button> <button type="button" @click="add_some_text()" class="btn btn-primary">Add text</button>
<button type="button" @click="crop()" class="btn btn-primary">Crop</button> <button type="button" @click="crop()" class="btn btn-primary">Crop</button>
<button type="button" @click="apply()" class="btn btn-primary">Apply</button> <button type="button" @click="apply()" class="btn btn-primary">Apply</button>
<button type="button" @click="cancel()" class="btn btn-primary">Cancel</button>
</div> </div>
<div id="tools-delete" x-show="toolbar == 'text'"> <div id="tools-delete" x-show="toolbar == 'text'">
<button type="button" @click="delete_selected();" class="btn btn-primary" style="">delete</button> <button type="button" @click="delete_selected();" class="btn btn-primary" style="">delete</button>
</div> </div>
<div id="tools-crop" x-show="toolbar == 'crop'">
<button type="button" @click="apply_crop();" class="btn btn-primary" style="">crop</button>
</div>
<div id="tools-colour" x-show="toolbar == 'text'"> <div id="tools-colour" x-show="toolbar == 'text'">
<table> <table>
<tr> <tr>
@ -72,7 +76,7 @@ var canvas = null;
function editor() { function editor() {
return { return {
img_data: "", scaleFactor: 1.0, img_data: "", scaleFactor: 0.5,
toolbar: null, toolbar: null,
colours: [ 'red', 'blue', 'green', 'white', 'yellow', 'black', 'purple'], colours: [ 'red', 'blue', 'green', 'white', 'yellow', 'black', 'purple'],
@ -90,12 +94,13 @@ function editor() {
}); });
fabric.Image.fromURL('/rest/image/'+id, function(oImg) { fabric.Image.fromURL('/rest/image/'+id, function(oImg) {
// TODO set scalefactor appropriately
canvas.setDimensions({width: oImg.width, height: oImg.height}); canvas.setDimensions({width: oImg.width, height: oImg.height});
oImg.selectable = false; oImg.selectable = false;
canvas.add(oImg); canvas.add(oImg);
// self.canvas.setHeight(self.canvas.getHeight() * (self.scaleFactor)); canvas.setHeight(canvas.getHeight() * (self.scaleFactor));
// self.canvas.setWidth(self.canvas.getWidth() * (self.scaleFactor)); canvas.setWidth(canvas.getWidth() * (self.scaleFactor));
// self.canvas.setZoom(self.scaleFactor); canvas.setZoom(self.scaleFactor);
}); });
}, },
export_image() { export_image() {
@ -138,8 +143,16 @@ function editor() {
}); });
canvas.renderAll(); canvas.renderAll();
}, },
// crop mode
crop() {
},
apply() { apply() {
image_data = canvas.toDataURL('png');
image_data = canvas.toDataURL({
format: 'png',
multiplier: 1.0/this.scaleFactor});
let formData = new FormData(); let formData = new FormData();
formData.append('image', image_data); formData.append('image', image_data);
var url = new URL(window.location); var url = new URL(window.location);
@ -151,9 +164,10 @@ function editor() {
window.location = '/uploads.html'; window.location = '/uploads.html';
}) })
} },
cancel() {
// selection:cleared window.location = '/uploads.html';
},