change to transparent background save image

This commit is contained in:
kicap1992
2021-07-13 19:36:48 +08:00
parent 8ce4f7968b
commit 5529bf441d
2 changed files with 24 additions and 7 deletions

View File

@ -309,7 +309,10 @@ resizeCanvas();
function takeshot() { function takeshot() {
var div = document.getElementById('sini_div_baju_color'); var div = document.getElementById('sini_div_canvas');
canvas.backgroundColor=null;
canvas.renderAll();
var canvasnya = canvas;
// Use the html2canvas // Use the html2canvas
// function to take a screenshot // function to take a screenshot
@ -320,7 +323,7 @@ resizeCanvas();
document document
.getElementById('output') .getElementById('output')
.appendChild(canvas); .appendChild(canvas);
var base64URL = canvas.toDataURL('image/jpeg'); var base64URL = canvas.toDataURL('image/png');
console.log(base64URL) console.log(base64URL)
$("#ini_untuk_share").attr('onclick',"window.plugins.socialsharing.share(null, 'Irwan T-Shirt Design', '"+base64URL+"', null)"); $("#ini_untuk_share").attr('onclick',"window.plugins.socialsharing.share(null, 'Irwan T-Shirt Design', '"+base64URL+"', null)");
var x = document.createElement("IMG"); var x = document.createElement("IMG");
@ -331,6 +334,8 @@ resizeCanvas();
setTimeout(function(){ setTimeout(function(){
$('#ini_untuk_share').trigger('click'); $('#ini_untuk_share').trigger('click');
}, 200); }, 200);
canvasnya.backgroundColor = null;
canvasnya.renderAll();
}) })
} }
@ -346,7 +351,9 @@ resizeCanvas();
opacity: .5, opacity: .5,
color: '#fff' color: '#fff'
} }); } });
var div = document.getElementById('sini_div_baju_color'); var div = document.getElementById('sini_div_canvas');
canvas.backgroundColor=null;
canvas.renderAll();
await html2canvas(div).then( await html2canvas(div).then(
function (canvas) { function (canvas) {
document document
@ -432,6 +439,8 @@ resizeCanvas();
} }
xhr.send(); xhr.send();
$.unblockUI(); $.unblockUI();
canvas.backgroundColor = null;
canvas.renderAll();
} }
function sleep(ms) { function sleep(ms) {

View File

@ -316,15 +316,17 @@ resizeCanvas();
function takeshot() { function takeshot() {
var div = document.getElementById('sini_div_baju_color'); var div = document.getElementById('sini_div_canvas');
canvas.backgroundColor=null;
canvas.renderAll();
var canvasnya = canvas;
html2canvas(div).then( html2canvas(div).then(
function (canvas) { function (canvas) {
document document
.getElementById('output') .getElementById('output')
.appendChild(canvas); .appendChild(canvas);
var base64URL = canvas.toDataURL('image/jpeg'); var base64URL = canvas.toDataURL('image/png');
console.log(base64URL) console.log(base64URL)
window.location.href = base64URL; window.location.href = base64URL;
@ -338,6 +340,8 @@ resizeCanvas();
setTimeout(function(){ setTimeout(function(){
$('#ini_untuk_share').trigger('click'); $('#ini_untuk_share').trigger('click');
}, 200); }, 200);
canvasnya.backgroundColor = null;
canvasnya.renderAll();
}) })
} }
@ -354,7 +358,9 @@ resizeCanvas();
opacity: .5, opacity: .5,
color: '#fff' color: '#fff'
} }); } });
var div = document.getElementById('sini_div_baju_color'); var div = document.getElementById('sini_div_canvas');
canvas.backgroundColor=null;
canvas.renderAll();
await html2canvas(div).then( await html2canvas(div).then(
function (canvas) { function (canvas) {
document document
@ -440,6 +446,8 @@ resizeCanvas();
} }
xhr.send(); xhr.send();
$.unblockUI(); $.unblockUI();
canvas.backgroundColor = null;
canvas.renderAll();
} }
function sleep(ms) { function sleep(ms) {