I am creating various pattern images using js, just like rotate image etc. but now it create blob image url, I need this image in to dataurl, so using input field I will convert it into images using php.
Please check code.
<form method="post" action="process.php">
<input type='file' id='getval' name="background-image" onchange="allcurve(event)" />
<input type="hidden" name="forearmleft" id="forearm" value="">
<input type="submit" name="submit" id="submit" value="submit">
<!--<img src="" id="elbotxt">-->
</form>
<canvas id="mr_rotator_can" width="436" height="567"></canvas>
<script type="text/javascript">
function allcurve(event){
forearmleftcurve(event);
/* left forarms start here*/
var temp_can1, temp_can1_ctx;
function forearmleftcurve(event){
var getImagePath = URL.createObjectURL(event.target.files[0]);
console.log(getImagePath)
temp_can1 = document.getElementById('f6258182013');
temp_can1_ctx = temp_can1.getContext('2d');
forearmleftrotator(getImagePath, '77');
};
function forearmleftrotator(var2, var3)
{
var mr_rotator_var = document.getElementById('mr_rotator_can');
var mr_rotator_var_ctx = mr_rotator_var.getContext("2d");
mr_rotator_var.width = mr_rotator_var.width;
var imageObj_rotator = new Image();
imageObj_rotator.onload = function () {
var pattern_rotator = mr_rotator_var_ctx.createPattern(imageObj_rotator, "repeat");
mr_rotator_var_ctx.fillStyle = pattern_rotator;
mr_rotator_var_ctx.rect(0, 0, mr_rotator_var.width, mr_rotator_var.height);
mr_rotator_var_ctx.rotate(var3 * Math.PI / 180);
mr_rotator_var_ctx.fill();
};
imageObj_rotator.src = var2;
$('#forearm').attr("value", var2);
}
}
</script>
