Canvas 中的 SVG 使用 fabric js 和 FileReader API
SVG in Canvas using fabric js and FileReader API
我尝试 reader SVG 在 Canvas 中使用 fabric js 和 File ReaderAPI
以下图像代码,它可以与 SVG 一起使用,但它不会使用全部功能,例如更改颜色 (setFill) 和其他仅适用于 SVG 的功能
var reader = new FileReader(), input = document.getElementById('imgFile');
reader.onload = function (event) {
//loadSVGFromString
var imgObj = new Image();
imgObj.src = event.target.result;
imgObj.onload = function () {
// start fabricJS stuff
var coord = getRandomLeftTop();
var image = new fabric.Image(imgObj);
if($scope.ImgOption != 'bg'){
image.set({
left: coord.left,
top: coord.top
});
canvas.add(image);
}else{
image.set({
scaleY: canvas.height / imgObj.height,
scaleX: canvas.width / imgObj.width
});
canvas.setBackgroundImage(image, canvas.renderAll.bind(canvas));
}
// end fabricJS stuff
}
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.5.0/fabric.min.js"></script>
我通过检查文件类型来解决这个问题,如果它是 svg 我使用 loadSVGFromString 方法将对象呈现为 svg 路径并为其着色
function reader(e){
var FileType='';
if(!window.FileReader && !window.File && !window.FileList && !window.Blob){
var IEversion = detectIE();
if (IEversion !== false) {
if(IEversion == 9 || IEversion == 8) {
alertify.alert("You're useing IE v"+IEversion+", /n Pleaase upgrade IE to v10 or higher in order to use the app features!"); // in html5 works and fires alert but not in IE8
}
}
return;
}
var reader = new FileReader(), input = document.getElementById('imgFile');
reader.onload = function (event) {
var coord = getRandomLeftTop();
if(FileType == 'svg'){
fabric.loadSVGFromString(event.target.result, function(objects, options) {
var loadedObject = fabric.util.groupSVGElements(objects, options);
loadedObject.set({
left: coord.left,
top: coord.top
}).setCoords();
canvas.add(loadedObject);
});
}else{
var imgObj = new Image();
imgObj.src = event.target.result;
imgObj.onload = function () {
// start fabricJS stuff
var image = new fabric.Image(imgObj);
if($scope.ImgOption != 'bg'){
image.set({
left: coord.left,
top: coord.top
});
canvas.add(image);
}else{
image.set({
scaleY: canvas.height / imgObj.height,
scaleX: canvas.width / imgObj.width
});
canvas.setBackgroundImage(image, canvas.renderAll.bind(canvas));
}
// end fabricJS stuff
}
}
}
if (!input) {
alertify.alert("Um, couldn't find the fileinput element.");
} else if (!input.files) {
alertify.alert("This browser doesn't seem to support the `files` property of file inputs.");
} else if (!input.files[0]) {
alertify.alert("Please select a file before clicking 'Load'");
} else {
file = input.files[0];
if (file.type == 'image/svg+xml') {
FileType = 'svg';
reader.readAsText(file);//readAsText(file);
}else{
FileType = 'image';
reader.readAsDataURL(file);
}
}
}
我尝试 reader SVG 在 Canvas 中使用 fabric js 和 File ReaderAPI
以下图像代码,它可以与 SVG 一起使用,但它不会使用全部功能,例如更改颜色 (setFill) 和其他仅适用于 SVG 的功能
var reader = new FileReader(), input = document.getElementById('imgFile');
reader.onload = function (event) {
//loadSVGFromString
var imgObj = new Image();
imgObj.src = event.target.result;
imgObj.onload = function () {
// start fabricJS stuff
var coord = getRandomLeftTop();
var image = new fabric.Image(imgObj);
if($scope.ImgOption != 'bg'){
image.set({
left: coord.left,
top: coord.top
});
canvas.add(image);
}else{
image.set({
scaleY: canvas.height / imgObj.height,
scaleX: canvas.width / imgObj.width
});
canvas.setBackgroundImage(image, canvas.renderAll.bind(canvas));
}
// end fabricJS stuff
}
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.5.0/fabric.min.js"></script>
我通过检查文件类型来解决这个问题,如果它是 svg 我使用 loadSVGFromString 方法将对象呈现为 svg 路径并为其着色
function reader(e){
var FileType='';
if(!window.FileReader && !window.File && !window.FileList && !window.Blob){
var IEversion = detectIE();
if (IEversion !== false) {
if(IEversion == 9 || IEversion == 8) {
alertify.alert("You're useing IE v"+IEversion+", /n Pleaase upgrade IE to v10 or higher in order to use the app features!"); // in html5 works and fires alert but not in IE8
}
}
return;
}
var reader = new FileReader(), input = document.getElementById('imgFile');
reader.onload = function (event) {
var coord = getRandomLeftTop();
if(FileType == 'svg'){
fabric.loadSVGFromString(event.target.result, function(objects, options) {
var loadedObject = fabric.util.groupSVGElements(objects, options);
loadedObject.set({
left: coord.left,
top: coord.top
}).setCoords();
canvas.add(loadedObject);
});
}else{
var imgObj = new Image();
imgObj.src = event.target.result;
imgObj.onload = function () {
// start fabricJS stuff
var image = new fabric.Image(imgObj);
if($scope.ImgOption != 'bg'){
image.set({
left: coord.left,
top: coord.top
});
canvas.add(image);
}else{
image.set({
scaleY: canvas.height / imgObj.height,
scaleX: canvas.width / imgObj.width
});
canvas.setBackgroundImage(image, canvas.renderAll.bind(canvas));
}
// end fabricJS stuff
}
}
}
if (!input) {
alertify.alert("Um, couldn't find the fileinput element.");
} else if (!input.files) {
alertify.alert("This browser doesn't seem to support the `files` property of file inputs.");
} else if (!input.files[0]) {
alertify.alert("Please select a file before clicking 'Load'");
} else {
file = input.files[0];
if (file.type == 'image/svg+xml') {
FileType = 'svg';
reader.readAsText(file);//readAsText(file);
}else{
FileType = 'image';
reader.readAsDataURL(file);
}
}
}