I have svg images in my page:
And I use to convert to png images (and download them):
https://github.com/CogComp/apelles/blob/master/public/index.html#L370-L390
var mySVG = $("#" + id + " svg")[0];
var imgId = id + "-img";
$(document.body).append('<img height="' + mySVG.getBBox().height + '" width="' + mySVG.getBBox().width + '" id="' + imgId + '" style="visibility: hidden; "/>');
var tgtImage = document.getElementById(imgId); // Where to draw the result
var can = document.createElement('canvas'); // Not shown on page
var ctx = can.getContext('2d');
var loader = new Image;
loader.width = can.width = tgtImage.width;
loader.height = can.height = tgtImage.height;
loader.onload = function () {
ctx.drawImage(loader, 0, 0, loader.width, loader.height);
tgtImage.src = can.toDataURL();
};
var svgAsXML = (new XMLSerializer).serializeToString(mySVG);
loader.src = 'data:image/svg+xml,' + encodeURIComponent(svgAsXML);
sleep(500).then(() => {
var url = tgtImage.src.replace(/^data:image\/[^;]/, 'data:application/octet-stream');
window.open(url);
});
Here is the output. Why is the output turned dark?
I tried changing the background color but didn't help.
Here is the link to the page btw: http://nlp.cogcomp.org/
Update: Checking the SVG code I think I have a background:
Despite having a background, I tried adding a background to the picture, but doesn't seem to help. Here are a couple of variations I have tried:
var svgQ = $("#" + id + " svg");
var mySVG = svgQ[0];
var rect = document.createElementNS(svgQ,'rect');
rect.setAttribute('x',10);
rect.setAttribute('y',10);
rect.setAttribute('width',50);
rect.setAttribute('height',50);
rect.setAttribute('fill','#EFEFEF');
mySVG.appendChild(rect);
// or mySVG.append(rect);
$("svg").each(function(){
$(this).css({ fill: '#000' });
// or $(this).attr("fill", '#000');
// or $(this).attr("fill", '#000000');
});
svgQ.css({ fill: '#000' });
// or svgQ.attr("fill", '#000');
// or svgQ.attr("fill", '#000000');
I'm developing a tool to make areas and tripwires and I'm working with Raphael JS. The thing is that I want to build a path dinamically and I think I got it, at least in Chrome, because in Firefox it gets crazy.
What I mean with crazy is that the position of the points do not correspond with the real position of the cursor (and I repeat, only in Firefox).
You have a fiddle I did here.
http://jsfiddle.net/6dd2870b/4/
Any thoughts on why can this be happening?
Thank you in advance.
The javascript code of the fiddle is:
var canvas = document.getElementById('canvas'),
paper = new Raphael(canvas, canvas.height, canvas.width),
mousedown = false,
lastX, lastY, path, pathString, pathAux, pointsAux = [];
$(canvas).mousedown(function (e) {
var x = e.offsetX,
y = e.offsetY;
if (!mousedown) {
pathString = 'M ' + x + ' ' + y + ' ';
mousedown = true;
} else {
pathString += 'l ' + (x - lastX) + ' ' + (y - lastY) + ' ';
}
pointsAux.push({x: x, y: y});
path = paper.circle(x,y,9);
path = paper.path(pathString);
lastX = x;
lastY = y;
});
$(canvas).mousemove(function (e) {
if (!mousedown) {
return;
}
var x = e.offsetX,
y = e.offsetY;
pathAux = pathString + 'l ' + (x - lastX) + ' ' + (y - lastY);
path.attr('path', pathAux);
});
$('#finish').click(function (e) {
if ($('#type').val() != 1) {
pathAux = pathString + ' z';
path.attr('path', pathAux);
} else {
path.attr('path', pathString);
}
mousedown = false;
});
$('#cancel').click(function (e) {
paper.clear();
mousedown = false;
});
Here is HTML and Code that draws an image into a canvas, after a user has used a file picker.
HTML
<form class='frmUpload'>
<input name="picOneUpload" type="file" accept="image/*" onchange="picUpload(this.files[0])" >
</form>
<button onclick='fncSaveAsJPG()'>Convert Img To JPEG</button>
<canvas id="cnvsForFormat" width="400" height="266"></canvas>
<img id='imgTwoForJPG' src="">
Script
<script>
window.picUpload = function(frmData) {
console.log("picUpload ran: " + frmData);
var cnvs=document.getElementById("cnvsForFormat");
console.log("cnvs: " + cnvs);
var ctx=cnvs.getContext("2d");
cnvs.style.border="1px solid #c3c3c3";
var img = new Image;
img.src = URL.createObjectURL(frmData);
console.log('img: ' + img);
img.onload = function() {
var picWidth = this.width;
var picHeight = this.height;
var wdthHghtRatio = picHeight/picWidth;
console.log('picWidth: ' + Number(picWidth));
console.log('picHeight: ' + Number(picHeight));
console.log('wdthHghtRatio: ' + wdthHghtRatio);
if (Number(picWidth) > 400) {
var newHeight = Math.round(Number(400) * wdthHghtRatio);
} else {
return false;
};
document.getElementById('cnvsForFormat').height = newHeight;
console.log('width: ' + picWidth + " h: " + picHeight);
console.log('width: 400 h: ' + newHeight);
//You must change the width and height settings in order to decrease the image size, but
//it needs to be proportional to the original dimensions.
ctx.drawImage(img,0,0, 400, newHeight);
};
cnvs.onload = function () {
console.log('Onload Canvas 2 Ran');
};
};
cnvsForFormat.onload = function () {
console.log('Onload Canvas Ran');
};
</script>
I've tried attaching the .onload() method to various elements and put the code in various places without any luck. How to I get some code to run with the <canvas> element is done with the drawImage event?
I am looking for some method to prompt the width and height of the image being uploaded using an asp file upload control. Following is the code I am using to prompt message for file size. I just want to add the width and height of the image being uploaded using that upload control. Please take a note that I can't use javascript DOM here like img.clientWidth as there is no such html object to call it.
Here's the JS Code
$(document).ready(function () {
$("#<%= fupNewImage.ClientID %>").bind("change", function () {
var fSize = ((this.files[0].size) / 1024).toFixed(2);
if (fSize <= 200) {
$("#fupSize").html('Good file size: ' + fSize + " kb Width=? and Height=?" ); // ? denotes the actual value to be put.
}
//---------More cases
});
});
Solved!!
Thanks to #Esailija
After a lot of searching I finally found a workout # REF https://stackoverflow.com/a/8904008/1584140
var _URL = window.URL || window.webkitURL;
$("#<%= fupNewImage.ClientID %>").bind("change", function () {
//================Changed Code===================
var file, img;
if ((file = this.files[0])) {
img = new Image();
img.onload = function () {
var fSize = ((file.size) / 1024).toFixed(2);
var WH = " Widht: " + this.width + "px & Height: " + this.height + "px";
if (fSize <= 200) {
$("#fupSize").html('Good file size: ' + fSize + " kb" + WH);
}
};
img.onerror = function () {
alert("not a valid file: " + file.type);
};
img.src = _URL.createObjectURL(file);
}
//====================================
});
});
i have a JavaScript project (using jquery), inside it i draw a canvas by code and then i insert array of images on it. it represents fine without any error.
problem: later on, i try to get these images inside from canvas to compare if they have the same src or the same id to don't replace it with the new image
my functions are:
var inter;
var screen;
function onClick(id){
getScreen(id, function(data){
screen=window.open('',id,'width=' + data.maxX + ',height=' + data.maxY , true);
if (screen.document.getElementById("screen") != null ){
screen.document.getElementById("screen").innerHTML = "";
}
screen.document.write('<div id="screen"><canvas id="screenCanvas" width=' +
data.maxX + ' height=' + data.maxY +
' style="border:2px solid #000000;color:#000000;" ></canvas></div>');
draw(data);
inter = setInterval(function(){screen(id); }, 5000);
});
}
function screen(id){
getScreen(id, function(data){
if (screen.closed == true){
clearInterval(inter);
return;
}
if((screen.document.getElementById('screenCanvas').width != data.maxX) ||
(data.maxY != screen.document.getElementById('screenCanvas').height)){
screen.close();
screen=window.open('',id,'width=' + data.maxX + ',height=' + data.maxY , true);
screen=window.open('',id,'width=' + data.maxX + ',height=' + data.maxY , true);
if (screen.document.getElementById("screen") != null ){
screen.document.getElementById("screen").innerHTML = "";
}
screen.document.write('<div id="screen"><canvas id="screenCanvas" width=' +
data.maxX + ' height=' + data.maxY +
' style="border:2px solid #000000;color:#000000;" ></canvas></div>');
draw(data);
});
}
function draw(data) {
var canvas = screen.document.getElementById('screenCanvas');
var context = canvas.getContext('2d');
var tileY = 0;
var tileX = 0;
var counter = 0;
var tileWidth = data.tileWidth;
var tileHeight = data.tileHeight;
for (var i=0;i<(data.maxX/data.tileWidth);i++){
for (var j=0;j<(data.maxY/data.tileHeight);j++){
var img = new Image();
img.onload = (function(img, tileX, tileY, tileWidth, tileHeight){
return function() {
context.drawImage(img,tileX, tileY, tileWidth, tileHeight);
}
})(img, tileX, tileY, tileWidth, tileHeight);
img.src = "http://myserver:8080/images/screen/tile/" +
data.tiles[counter].imageId;
tileX = tileX + parseInt(data.tileWidth);
counter ++;
}
tileY = tileY + parseInt(data.tileHeight);
tileX = 0;
}
}
</script>
this code gets an array (data) that contains list of (id, maxX, maxY, tileWidth, tileHeight, tiles[x, y, imageId]) and open new window, then write in this window the canvas code and draw images then calls a timer to work each 5 seconds. after each 5 seconds, screen method calls to re-get the data again and check if screen open then it remove all inner html to rewrite new canvas, and it tests if sizes changes.
this code works fine without any error, but i need to edit these code to get images inside canvas and test it they has the same imageId, don't download it again.(i don't save image id, to get images by, we can store it in img.id, or get images by src since, imageId is a part of image path that makes it unique).
Note:
id[unique](is the id of the user),
maxX(maximum width of the screen),
maxY(maximum height of the screen),
tileWidth(width of each image),
tileHeight(height of each image),
tiles(list of images)
x(left position of the image)
y(top postion of the image)
imageId[unique](id of each image)
example: data[id:1,maxX:1920,maxY:1080,tileWidth:480,tileHeight:270,tiles:(x:2,y:1,imageId:1a)]
any help?
as Ravi Jain said you can't get the image drawn to canvas object, and as robertc said you can use img element.
try these functions that specify the usage of img element not canvas:
function onClick(id){
getScreen(id, function(data){
var inter;
var screen;
var width = parseInt(data.maxX) + parseInt(data.tileWidth);
var height = parseInt(data.maxY) + parseInt(data.tileHeight);
screen=window.open('',id,'width=' + width + ',height=' + height , true);
draw(screen, data);
inter = setInterval(function(){screen(screen, inter, id); }, 5000);
});
}
function screen(screen, inter, id){
getScreen(id, function(data){
if (screen.closed == true){
clearInterval(inter);
return;
}
if((screen.document.getElementById("screen").style.width != data.maxX + "px") ||
(screen.document.getElementById("screen").style.height != data.maxY + "px")){
screen.close();
var width = parseInt(data.maxX) + parseInt(data.tileWidth);
var height = parseInt(data.maxY) + parseInt(data.tileHeight);
screen=window.open('',id,'width=' + width + ',height=' + height , true);
}
draw(screen, data);
});
}
function draw(screen, data) {
var screenDiv = screen.document.getElementById("screen");
if (screenDiv == null) screen.document.write('<div id="screen" style="width:' +
data.maxX + '; height:' + data.maxY + '; " style="margin: 0 auto;" >');
var tileY = 0;
var tileX = 0;
var counter = 0;
for (var i=0;i<(data.maxX/data.tileWidth);i++){
for (var j=0;j<(data.maxY/data.tileHeight);j++){
var imageSource = screen.document.getElementById("id_" + counter);
var path = "http://myserver:8080/images/screen/tile/" +
data.tiles[counter].imageId;
if (imageSource == null){
screen.document.write('<img id="id_' + counter + '" src="' + path +
'" height="' + data.tileHeight + '" width="' + data.tileWidth + '" />');
}else if(imageSource.src != path){
imageSource.src = path;
}
tileX = tileX + parseInt(data.tileWidth);
counter ++;
}
tileY = tileY + parseInt(data.tileHeight);
tileX = 0;
}
if (screenDiv == null) screen.document.write('</div>');
}
</script>
your code are working fine that's true, but for one instance only, you declare var screen and var inter at the top of the script not in the function, this means that if you click on the first user to get it's screen (as what i understood of your code, what your project did), the timer of the first user stops and of the second user starts. this code that i wrote solve this problem and your problem to replace the source of the image if it changes.
hope this help you man,
GOOD LUCK;
Once you've drawn something on canvas it's pixels. It doesn't retain the object that was used to create those pixels. If you want this sort of information then you either need to maintain it yourself outside of canvas, or use something which retains objects for you like SVG.