我有以下代码:
<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>
在这段代码中,我正在上传JPG图片,但画布大小是固定的,我想根据上传的图片调整画布大小。当我将画布调整到图像的高度和宽度时,它无法正常工作。这个你能帮我吗。我希望你们能解决这个问题。谢谢!
答案 0 :(得分:0)
我想我找到了回答你问题的方法。正如我在评论中提到的,在最后一个循环中存在错误,我的代码似乎同意它:
<script type="text/javascript">
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": {} });
var canvasData = [];
//Ilterate through the contained json objects in variable 'canvasdiscription'
for (var i = 0; i < canvasdiscription.length; i++)
{
//Generate a plain Javascript object
var objectProperties = eval(canvasdiscription[i]);
//I suppose you want to take the background image as base for the new canvas size
var imageDimensions = new Image()
imageDimensions.src = canvasdiscription[i].backgroundImage;
//Ilterate through the contained json objects in variable 'canvasdiscription.objects',
//because the property 'objects' contains a list of data in json format
for (var j = 0; j < objectProperties.objects.length; j++)
{
//In my example the following lines modifies the orginal values
objectProperties.objects[j].height = imageDimensions.height;
objectProperties.objects[j].width = imageDimensions.width;
objectProperties.objects[j].scaleFactorX = 1; // 0.75714285714286;
objectProperties.objects[j].scaleFactorY = 1; // 0.75714285714286;
objectProperties.objects[j].left = 10;
objectProperties.objects[j].top = 10;
//Store that current item into an array
canvasData.push(objectProperties.objects[j]);
}
}
//Example output
console.log("height: " + canvasdiscription[0].objects[0].height);
console.log("top: " + canvasdiscription[0].objects[0].top);
console.log("scaleFactorX: " + canvasdiscription[0].objects[0].scaleFactorX);
</script>
希望它适合你。