我正在使用带有fabric js的画布。我正在尝试将image中的画布区域转换为正常,但是当我调整画布的大小并尝试将调整后的画布转换为图像时,它不起作用。 我认为电路板正在扩展,然后转换为图像,因为它的内联宽度,我尝试修改该内联宽度和高度后,fabric元素却无法正常工作。
这是我的代码
<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/4.0.0-beta.12/fabric.js"></script>
<style>
select {
position: absolute;
top: 1000px;
}
</style>
<div id="lemu">
<canvas id='mycanvas' width='750' height='515' style='border:1px solid #000000;'></canvas>
</div>
<div class="japu">Click For Logo </div>
<img class="sf" src="" style="border:1px solid">
<script language="JavaScript">
$(document).ready(function () {
jQuery('.japu').click(function(){
var canstring = canvas.toDataURL("image/png", 1.0);
jQuery('img').attr('src',canstring);
});
var canvas = new fabric.Canvas('mycanvas');
fabric.Image.fromURL('https://fallbacks.carbonads.com/nosvn/fallbacks/731050e6bd3fc6979e1cb1a972294dae.png', function(img) {
var oImg = img.set({ left: 150, top: 0}).scale(0.4);
canvas.add(oImg);
});
jQuery('select').change(function(){
var valu = jQuery(this).val();
var candata = valu.split('x');
if(candata[0]==1){
jQuery('canvas').width(750);
}
else{
jQuery('canvas').width(candata[0]*20/2);
jQuery('.canvas-container').width(candata[0]*20/2);
}
});
});
</script>
<select><option value="1x1">36x24</option> <option value="36x48">36x24</option> <option value="36x48">36x96</option> </select>
提琴
答案 0 :(得分:0)
您有一个跨源问题。 这是一个有效的示例。
$=jQuery;
$(document).ready(function () {
jQuery('.japu').click(function(){
var canstring = canvas.toDataURL();
jQuery('img').attr('src',canstring);
});
fabric.StaticCanvas.prototype.toCanvasElement = function(multiplier, cropping) {
multiplier = multiplier || 1;
cropping = cropping || { };
var scaledWidth = (cropping.width || this.width) * multiplier,
scaledHeight = (cropping.height || this.height) * multiplier,
zoomX = canvas.viewportTransform[0],
zoomY = canvas.viewportTransform[3],
originalWidth = this.width,
originalHeight = this.height,
newZoomX = zoomX * multiplier,
newZoomY = zoomY * multiplier,
vp = this.viewportTransform,
translateX = (vp[4] - (cropping.left || 0)) * multiplier,
translateY = (vp[5] - (cropping.top || 0)) * multiplier,
originalInteractive = this.interactive,
newVp = [newZoomX, 0, 0, newZoomY, translateX, translateY],
originalRetina = this.enableRetinaScaling,
canvasEl = fabric.util.createCanvasElement(),
originalContextTop = this.contextTop;
canvasEl.width = scaledWidth;
canvasEl.height = scaledHeight;
this.contextTop = null;
this.enableRetinaScaling = false;
this.interactive = false;
this.viewportTransform = newVp;
this.width = scaledWidth;
this.height = scaledHeight;
this.calcViewportBoundaries();
this.renderCanvas(canvasEl.getContext('2d'), this._objects);
this.viewportTransform = vp;
this.width = originalWidth;
this.height = originalHeight;
this.calcViewportBoundaries();
this.interactive = originalInteractive;
this.enableRetinaScaling = originalRetina;
this.contextTop = originalContextTop;
return canvasEl;
};
window.canvas = new fabric.Canvas('mycanvas');
fabric.Image.fromURL('http://fabricjs.com/assets/pug_small.jpg', function(img) {
var oImg = img.set({ left: 200, top: 0}).scale(0.4);
oImg.crossOrigin ='Anonymous';
canvas.add(oImg);
}, { crossOrigin: 'Anonymous' });
var currentWidth = canvas.getWidth();
var currentHeight = canvas.getHeight();
jQuery('select').change(function(){
var valu = jQuery(this).val();
var candata = valu.split('x');
if(candata[0]==1){
var newW = 200;
var newH = 300;
canvas.setWidth(newW);
canvas.setHeight(newH);
canvas.viewportTransform[0] = newW/currentWidth;
canvas.viewportTransform[3] = newH/currentHeight;
canvas.getObjects()[0].setCoords()
}
else{
var newW = 100;
var newH = 100;
canvas.setWidth(newW);
canvas.setHeight(newH);
canvas.viewportTransform[0] = newW/currentWidth;
canvas.viewportTransform[3] = newH/currentHeight;
canvas.getObjects()[0].setCoords()
//canvas.width = 100;
//jQuery('canvas').width(100);
}
});
});
提琴:https://jsfiddle.net/p1m7wt8v/4/ 在这里,您有一个解释: Tainted canvases may not be exported