I am looking at a way to divide the image into pieces.
The no of pieces that the image can be split into is configurable using tile_height and tile_width.Looking for help.
I would not want any solution with any frameworks. Only using vanilla JavaScript
I tried the below
var _clipX =0;
var _clipY = _clipX;
var _clipHeight = IMAGE_HEIGHT/TILE_HEIGHT;
var _clipWidth = IMAGE_WIDTH/TILE_WIDTH;
var _nRows = Math.floor(IMAGE_HEIGHT/TILE_HEIGHT);
var _nColumns = Math.floor(IMAGE_WIDTH/TILE_WIDTH);
for(var i=0;i<_nRows;i++){
for(var j=0;j<_nColumns;j++){
el.getContext('2d').drawImage(image, _clipX, _clipY, _clipWidth, _clipHeight, _clipX, _clipY,_clipWidth , _clipHeight);
_clipX = _clipX + _clipWidth;
}
_clipX = 0
_clipY = _clipY + _clipHeight;
}
Below is the JSFiddle for the work
JSFiddle
Yes!!!
Found it. Instead of iterating over the image tag dimensions when you call draw image it does iterate over the natural dimensions of the image hence the issue I faced.
Now I have tried with the image size same as my img tag dimensions and it works perfectly fine.
Thanks everyone for the help offered
Related
My HTML table displays dynamic images properly on the webpage, however, an attempt to generate a PDF using jsPDF following this example created on codepen is failing me. I'm getting the below pdf without the image filling the entire width and the height appears to be reduced instead of getting the original image size- I'm using base64:
I have also looked at several questions and answers here on SO and elsewhere extensively with no avail like this one here How to get table row image in PDF using jsPDF? and followed this discussion here https://github.com/simonbengtsson/jsPDF-AutoTable/issues/173, but I don't seem to wrap my head around this.
function createPdf(){
var doc = new jsPDF();
doc.autoTable({
html: '#mytable',
bodyStyles: {minCellHeight : 30},
didDrawCell: function(data){
if(data.cell.section ==='body' && data.column.index ===1) {
var td = data.cell.raw;
var img = td.getElementsByTagName('img')[0];
var dim = data.cell.height - data.cell.padding('vertical');
var textPos = data.cell.textPos;
doc.addImage(img.src, textPos.x, textPos.y, dim, dim);
}
}
})
doc.save("table.pdf");
}
The issue appears to do with the width and height dimensions which is dynamic and also the images are further on the right. However, the priority issue is to set auto value for height to provide desirable outcome.
Anyone with expertise in this, kindly Check what I have used here https://jsfiddle.net/kibika2020/0rtoph6s/5/
function createPdf(){
var doc = new jsPDF();
doc.autoTable({
html: '#mytable',
bodyStyles: {minCellHeight : 50},
didDrawCell: function(data){
if(data.cell.section ==='body' && data.column.index ===1) {
var td = data.cell.raw;
var img = td.getElementsByTagName('img')[0];
var dim = data.cell.height - data.cell.padding('vertical');
var textPos = data.cell.textPos;
doc.addImage(img.src, textPos.x, textPos.y, dim, dim);
}
}
})
doc.save("autoble.pdf");
}
I'm a beginner and finding this jsPDF stuff really tough than I expected. Take a look and advise me accordingly.
Thank you.
I'm trying to use this methods ( http://jsfiddle.net/erickzanardo/RHZL6/ ) to create a canvas with createElement and then draw on it, but since I'm using JQuery the canvas so created deosn't have a class function getContext("2d"), but it seems to work on the last jsfiddle.
My code is as follow :
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
var map_rendered = document.createElement("map");
map_rendered.heigt = 100 ; map_rendered.width = 100 ;
var map_rendered_ctx = map_rendered.getContext("2d");
the error I get is :
TypeError: map_rendered.getContext is not a function
Do you have a way to solve it, or any other method to create a pre-rendered map, my aim is then to display a subsection of this map in a smaller canvas.
Thanks.
change "map" to "canvas", and error will gone
var map_rendered = document.createElement("canvas");
map_rendered.heigt = 100 ;
map_rendered.width = 100 ;
var map_rendered_ctx = map_rendered.getContext("2d");
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
Heavily inspired by this, I have made a plugin that works in mobiles and desktops to crop an image
What I made is added touch support, added dynamic canvas size based on image dimensions and trying to add functionality of moving an image rather selection area like here. I wanted to buy this item but it has failed my test case in devices (I am sorry to mention here). So thought of customizing the first mentioned source.
Here is the fiddle.
my html is
<div class="container">
<canvas id="panel" width="779" height="519"></canvas>
</div>
<input type="button" value="crop Selection" id="crop-image" />
<img id="croppedSelection" height="100px" width="100px" />
And calling it like
var Cropper = new CanvasCrop(document.getElementById('panel'), 'http://www.script- tutorials.com/demos/197/images/image.jpg');
$('#crop-image').on('click', function(){
var src = Cropper.getBase64();
$('#croppedSelection').attr('src', src);
});
My only problem is now, how can I keep the selection area on screen while image parent is being scrolled as here.
Thanks, help will be greatly appreciated.
Source code is huge to fit here, so added a working fiddle.. Thanks
Edit
Updated fiddle fixed canvas height and width issue
I wrote this code because I was bored.
Add this class above your code. you do not need the class if you only want one viewer on the page, you can put this all in a simple object. perhaps you need more:
function viewer (html_viewer)
{
this.html_viewer=html_viewer;
Object.defineProperty (html_viewer,"viewer_instance",{writeable:false,configureable:false,enumerable:false,value:this});
this.Selections=new Array ();
html_viewer.addEventListener ("mousedown",this.startScrolling);
html_viewer.addEventListener ("mouseup", this.endScrolling);
html_viewer.addEventListener ("scroll",this.setSelectionPosition);
}
viewer.prototype.startScrolling=function ()
{
var Selections=this.viewer_instance.Selections, Selection;
var l=Selections.length;
for (var i=0;i<l;i++)
{
Selection=Selections[i];
Selection.startLeft=Selection.x;
Selection.startTop=Selection.y;
Selection.viewer_startScrollLeft=this.scrollLeft;
Selection.viewer_startScrollTop=this.scrollTop;
}
}
viewer.prototype.setSelectionPosition=function ()
{
var Selections=this.viewer_instance.Selections, Selection;
var l=Selections.length;
for (var i=0;i<l;i++)
{
Selection=Selections[i];
Selection.x=this.scrollLeft-Selection.viewer_startScrollLeft+Selection.startLeft;
Selection.y=this.scrollTop-Selection.viewer_startScrollTop+Selection.startTop;
}
this.viewer_instance.drawScene ();
}
viewer.prototype.endScrolling=function ()
{
var Selections=this.viewer_instance.Selections, Selection;
var l=Selections.length;
for (var i=0;i<l;i++)
{
Selection=Selections[i];
Selection.startLeft=null;
Selection.startTop=null;
Selection.viewer_startScrollLeft=null;
Selection.viewer_startScrollTop=null;
}
}
viewer.prototype.addSelection=function (Selection)
{
Selection.startLeft=null;
Selection.startTop=null;
Selection.viewer_startScrollLeft=null;
Selection.viewer_startScrollTop=null;
Selection.viewerIndex=this.Selections.length;
this.Selections.push (Selection);
}
viewer.prototype.removeSelection=function (viewerIndex)
{
var Selections=this.Selections, l=Selections.length, i;
Selection=Selections[viewerIndex];
delete Selection.startLeft;
delete Selection.startTop;
delete Selection.viewer_startScrollLeft;
delete Selection.viewer_startScrollTop;
delete Selection.viewerIndex;
for (i=viewerIndex+1;i<l;i++)
Selections[i].viewerIndex=i-1;
Selections.splice (viewerIndex,1);
}
var imageViewer= new viewer (document.getElementById("panel").parentNode);
After line 27
theSelection = new Selection(64, 64, 64, 64);
Add
imageViewer.addSelection (theSelection);
imageViewer.drawScene=drawScene;
That's all, if you have problems let me know.
need further discussion how to implement image crop. do you want a selection inside the canvas or do you want to resize the complete imageCropper container and make a crop
// look at
http://jsfiddle.net/ThorstenArtnerAustria/5qdDW/1/
I am using the HTML5 Canvas. I have added images (BitmapImages) to the canvas and I now want to add simple tooltips to these bitmap images.
Is this possible ??? If so can someone tell / show me how I could achieve this ?
I am not sure if it makes a difference , but I am also using the Easel JS Framework ...
Here is an example of what I currently have:
var container = new Container(); // EaselJS Container
container.x = 100;
container.y = 100;
stage.addChild(container);
var image = new Image();
image.src = "image.png";
var bitmap = new Bitmap(image);
bitmap.x = 5;
bitmap.y = 5;
bitmap.mouseEnabled = true;
container.addChild(bitmap);
...
I have not tested this code, but basically a bitmap image is created and added to my stage. I now want to add a simple tool tip to my bitmap image, but cant seem to work out how :(
Any help would be greatly appreciated.
Cheers,
Jon.
Here's how I would do it:
stage.enableMouseOver();
bitmap.onMouseOver = function(e) {
stage.canvas.title = 'put your tooltip text here';
}
bitmap.onMouseOut = function(e) {
stage.canvas.title = '';
}
This works by using tooltips already provided by the browser.
I am trying to generate and draw shapes using HTML 5 canvas and JavaScript. I am trying to make it as DRY as possible but having some issues. I have the code as follows:
var sections = {
"w_end" : {
"name":"W End",
"id":"w_end",
"dimensions": {"move_to":[0,0], "coords":[[0,50], [50,50], [0,50]]}
}
}
$(document).ready(function() {
$.each(sections, function(k,v){
make_shape(k, v);
})
});
function make_shape(id, attributes) {
var holder = document.getElementById('room');
var grid_canvas = document.createElement("canvas");
holder.appendChild(grid_canvas);
grid_canvas.setAttribute("id", id);
var item = grid_canvas.getContext("2d");
item.fillStyle = "rgb(154,250,50)";
item.beginPath();
item.moveTo(attributes.dimensions.move_to[0],attributes.dimensions.move_to[1]);
$.each(attributes.dimensions.coords, function(k ,v){
item.lineTo(v[0],v[1]);
});
item.fill();
item.closePath();
}
This does not seem to work when pulling the lineTo values from the json. I can switch the lineTo(v[0],v[1]) for lineTo(50,75) inside the lopp and it generates a filled shape. I am not great at JavaScript as you can tell. Does anyone know what the issue is here and maybe give some advice on generating multiple shapes from some sort of list?
Cheers
Tony
I played around with your code, it is flawless. There is no triangle drawn because somehow the path going back to itself fills nothing. Place only the first two vertices and it is OK.
"dimensions": {"move_to":[0,0], "coords":[[0,50], [50,50]]}
See this fiddle: http://jsfiddle.net/Nm7UQ/
Note that I commented out document.ready.