Canvas——将两张图片拼接在一起展示在一个模态框中

使用canvas将两张图片拼接，展示在模态框中

1.html：

<div class="modal fade" id="myModal_answer" tabindex="-1" role="dialog" aria-labelledby="myModalLabel_answer"
	aria-hidden="true" ondragstart="return false;" data-backdrop=false>
	<div class="modal-dialog" style="margin-top: 5%;" id="answer_IMG_content">
		<div class="modal-content noselect" id="answer_IMG_content_"
			style="background:rgba(0,0,0,0.6);border-radius:0;min-height:200px;position: relative;width: 100%;overflow: hidden;">
			<canvas id="answer_IMG_tag" style="position: absolute;"></canvas>
		</div>
	</div>
</div>

2.js:

var picArr = ['http://a.png','http://b.png'];//图片随便定义的
var cWidth = 0;//展示宽度
var cHeight = 0;//展示高度，两图片高度叠加即可
var arr = [];
var count = 0;
loadImg();
setTimeout(function () {
    var w = $('#answer_IMG_tag')[0].width,
        h = $('#answer_IMG_tag')[0].height;
    $scope.detailData.zeroWaH.w = $('#answer_IMG_tag')[0].width + 2;
    $scope.detailData.zeroWaH.h = $('#answer_IMG_tag')[0].height;

    $('#answer_IMG_content').css({ 'width': w + 200, 'height': h + 200 });
    $('#answer_IMG_content_').css({ 'width': w + 200, 'height': h + 200 });
	//设置缩放比例为1
    $('#answer_IMG_tag').css({
        'transform': 'scale(1)', 
        '-ms-transform': 'scale(1)',
        '-webkit-transform': 'scale(1)',
        '-o-transform': 'scale(1)',
        '-moz-transform': 'scale(1)',
        'top': 100,
        'left': 100
    });
}, 100)
$('#myModal_answer').modal('show');

//预加载图片
function loadImg() {
    var myImage = new Image();
    myImage.src = 'upload/' + picArr[count];
    myImage.onload = function () {
        arr.push(myImage);
        cWidth < myImage.width ? cWidth = myImage.width : null;
        cHeight += myImage.height;
        if (count == picArr.length - 1) {
            setCanvas();
            return;
        } else {
            count++;
            loadImg();
        }
    }
}
//绘制Canvas
function setCanvas() {
    var canvas = document.getElementById("answer_IMG_tag");
    canvas.width = cWidth;
    canvas.height = cHeight;
    var context = canvas.getContext("2d");
    context.rect(0, 0, canvas.width, canvas.height);
    context.fill();
    var h = 0;
    for (var i = 0; i < arr.length; i++) {
        context.drawImage(arr[i], 0, h, arr[i].width, arr[i].height);
        h += arr[i].height;
    };
}

使用的话，更换图片地址即可