Before you can crop a composite picture, you first need to understand canvas and cropper.
canvas
1. Create a node first: var c=ocument.createElement("canvas"); and
2. Create a drawing environment for c: var ctx = canvas.getContext("2d");
3. You can set the width and height: canvas.width=330; canvas.height=440 (see how big you want to set);
4. You can start drawing with drawImage of canvas: ctx.drawImage(img,0,0,300,400), where img is the path of the picture to be drawn in, with 0 being the starting point of x and y axes, and 300 and 400 being the width and height of the picture to be drawn;
4. If you want to add text to the canvas, you can use canvas's fillText: ctx.fillText('synthesized successfully', 10,20), where 10 and 20 are distances from the x and y axes;
5. The path returned by canvas is base64: var dase64 = canvas.toDataURL("image/jpeg", 0.1), where 0.1 is the canvas compressed picture size, if you want, you can't
Example: html
js:<div class="container"> <img src="" alt="" id="img1"> </div>
<script src="http://mat1.gtimg.com/tech/css/huiyan/jquery.min.js"></script>
<script type="text/javascript">
var canvas = document.createElement("canvas");
var ctx = canvas.getContext("2d");
canvas.width=330;
canvas.height=440;
var img=new Image;//Newan img object
img.src='img/img1.png';//Only relative paths can be used here, absolutely cross-domain problems
img.onload=function(){
ctx.drawImage(img,0,0,300,400);//How many pictures do you want to synthesize drawImage s?
var img2=new Image;
img2.src='img/img2.png';
img2.onload=function(){
ctx.drawImage(img2,250,350,30,40);
ctx.fillText("Hello World!",10,50);//FilText can add text
var base64=canvas.toDataURL("image/jpeg");//toDataURL Self-Loop Path
$('#img1').attr('src',base64)
}
}
</script> cropper
This is a picture clipping plugin http://fengyuanchen.github.io/cropper/, which works with jq. Remember to use the latest version of cropper, many bug s it solves
Paste code directly:
css:
<link rel="stylesheet" type="text/css" href="http://guangzhou.auto.qq.com/cropper/cropper.css"/>
<link rel="stylesheet" type="text/css" href="http://guangzhou.auto.qq.com/cropper/main.css"/>
<style type="text/css">
html,body{font-family: "Microsoft YaHei";font-size: 14px;}
body,h1,h2,h3,h4,h5,div,span,p,ul,ol,dl,dt,dd,a,input,img,select{margin: 0;padding: 0;list-style: none;border: 0;font-weight: normal;outline: none;}
.container{width: 300px;height: 400px;margin: auto;background-color: gainsboro;}
#img{width:100%;height: auto;margin: auto;}
input{width: 100px;height: 40px;border: 1px solid red;}html:
js:<input type="file" id="file" accept="image/*"> <div class="container"> <img src="" alt="" id="img"> </div> <input type="submit" name="button" id="submit" value="Clipping" /><input type="submit" name="submit1" id="submit1" value="Synthesis" /> <div > <img src="" id="img2" style="width: 300px;height: 400px;"/> </div> <div > <img src="" id="bg"/> </div>
<script src="http://mat1.gtimg.com/tech/css/huiyan/jquery.min.js"></script>
<script src="http://guangzhou.auto.qq.com/cropper/cropper.js" type="text/javascript" charset="utf-8"></script>
<script src="http://guangzhou.auto.qq.com/cropper/main.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
var $image = $('.container > img');
$image.cropper({
aspectRatio: 3 / 4,
background:false,
movable:true,
cropBoxResizable :true,
});
$('#file').change(function(){
var file = this.files[0];
fileName = file.name;
var reader = new FileReader();
//reader callback to restart clipping area
reader.onload = function(){
// Access the generated DataURL through reader.result
var url = reader.result;
//Re-start cropping area after selecting picture
$image.cropper('reset', true).cropper('replace', url);
};
reader.readAsDataURL(file);
});
$('#submit').click(function(){
var type = $image.attr('src').split(';')[0].split(':')[1];
var canVas = $image.cropper("getCroppedCanvas", {});
$('#img2').attr('src', canVas.toDataURL());
})
//This block is the code for synthesizing the picture and clipping it together
var canvas=document.createElement('canvas');
var ctx=canvas.getContext('2d')
canvas.width=300;
canvas.height=400;
$('#submit1').click(function(){
var img1=new Image;
img.src='img/bg.png'
img.onload=function(){
ctx.drawImage(img,0,0,300,400);
var img2=new Image;
img2.src=$('#img2').attr('src');
ctx.drawImage(img2,50,50,200,300);
ctx.fillText('Composite Picture Succeeded',40,50)
var dase64 = canvas.toDataURL("image/jpeg");
$('#bg').attr('src',dase64)
}
})
</script> Then there's the Image object.
(The above is crude, time-critical, and more inclusive)