Below is the code snippet I am working with:
<script type="text/javascript>
//start pdf to canvas
...
//end pdf to canvas
var a="123_m";
var imgname = "images/im/"+a+"/2";
var side = 1;
$(document).ready(function () {
$("#ImageUpload").uploadify({
'multi': false,
'queueSizeLimit': 1,
'fileSizeLimit': 0,
'progressData': 'speed',
'swf': 'upscripts/uploadify.swf',
'width': 67,
'height': 50,
'folder': 'Uploads',
'auto': true,
'onUploadError': function (file, errorCode, errorMsg, errorString) {
},
'onUploadSuccess': function (file, response) {
var a = file.name;
var b = "asdfd";
angular.element("#canvascontainer").scope().InsertImage(a);
}
});
var canvasdiscription = [{ "objects": [], "background": "rgba(0, 0, 0, 0)", "backgroundImage": "pug.jpg", "backgroundImageOpacity": 1, "backgroundImageStretch": true}];
canvasdiscription[0].objects.push({ "type": "leg-text", "left": 202, "top": 51, "width": 231, "height": 31.2, "fill": "#000000", "overlayFill": null, "stroke": null, "strokeWidth": 1, "strokeDashArray": null, "scaleX": 1.53, "scaleY": 1.53, "angle": 0, "flipX": false, "flipY": false, "opacity": 1, "selectable": true, "hasControls": true, "hasBorders": true, "hasRotatingPoint": true, "transparentCorners": true, "perPixelTargetFind": false, "text": "0001", "fontSize": 24, "fontWeight": 100, "fontFamily": "Arial", "fontStyle": "", "lineHeight": 1.3, "textDecoration": "", "textShadow": "", "textAlign": "left", "path": null, "strokeStyle": "", "backgroundColor": "", "useNative": true, "name": "text", "lockUniScaling": true, "config": { "feildId": "3", "feildName": "fldcname" }, "validations": { "maxwidth": 700, "maxheight": 400, "maxfont": 1000, "minfont": 0, "angle": 0 }, "controls": { "fontFamily": true, "fontSize": true, "boldFont": true, "normalFont": true, "italicFont": true, "colorFont": true, "groupOperations": true, "addToFront": true, "leftAlign": true, "rightAlign": true, "centerAlign": true, "underLine": true, "reAlign": true }, "originaltext": "0001", "meta": {} });
alert(imgname);
canvasdiscription[0].backgroundImage = imgname + "-2.jpg";
alert(imgname + "-2.jpg");
var canvasLimit = canvasdiscription.length;
var canvasData = [];
var jcrop_api;
var bounds, boundx, boundy;
var c = {};
for (var i = 0; i < canvasdiscription.length; i++)
{
var canvas = {};
canvas.json = canvasdiscription[i];
alert(canvasdiscription.length);
canvas.height = 559;
canvas.width = 397;
canvas.scaleFactorX = 1; // 0.75714285714286;
canvas.scaleFactorY = 1; // 0.75714285714286;
canvas.left = 10;
canvas.top = 10;
canvasData.push(canvas);
}
console.log(canvasData);
Start(canvasLimit, canvasData);
//Initially run the function:
$(window).resize();
});
</script>
The current issue I am facing in this code is related to resizing the canvas based on the uploaded JPG image. The resizing is not functioning as expected when adjusting it to match the dimensions of the image. I seek assistance in resolving this challenge and appreciate any help provided. Thank you!